EventHandling

• 카멜케이스로 작성

  • onClick, onMouseEnter , ...

• 이벤트에 연결된 js코드는 함수

  • 이벤트={함수}

• 실제 DOM요소들에만 사용 가능

  • 리액트 컴포넌트에 사용하면 그냥 props르 전달됨

• 함수형 컴포넌트에서 적용 (onClick)

    function Component() {
            return (
              <div>
                <button
                  onClick={() => {
                    console.log("hello")
                  }}
                >
                  클릭
                </button>
              </div>
            )
          }

• 클래스형 컴포넌트에서 적용 (onClick)

    class Component extends React.Component{
    
    state = { count: 0 }
    
    render() {
              return (
               <div>
                  <p>{this.state.count}</p>
                  <button
                    onClick={() => {
                      console.log("hello")
                      this.setState((state) => ({
                        ...state,
                        count: state.count + 1,
                      }))
                    }}
                  >
                    클릭
                  </button>
                </div>
              )
            }
    }

• 함수를 따로 바깥에서 정의할 경우
  

        class Component extends React.Component{
        
        state = { count: 0 }
        
        render() {
                  return (
                   <div>
                      <p>{this.state.count}</p>
                      <button
                        onClick={() => {
                          
                        }}
                      >
                        클릭
                      </button>
                    </div>
                  )
                }
        
        click() {
                  console.log("hello")
                  this.setState((state) => ({
                    ...state,
                    count: state.count + 1,
                  }))
                }
        }

이렇게만 하면 this 가 undefined 오류가 발생한다.

해결방법

1. bind 작업을 해준다
   

        class Component extends React.Component{
        
        state = { count: 0 }
        
        constructor(props){
        	super(props);
        	this.click = this.click.bind(this)
        }
        
        render() {
                  return (
                   <div>
                      <p>{this.state.count}</p>
                      <button
                        onClick={() => {
                          
                        }}
                      >
                        클릭
                      </button>
                    </div>
                  )
                }
        
        click() {
                  console.log("hello")
                  this.setState((state) => ({
                    ...state,
                    count: state.count + 1,
                  }))
                }
        }

2. ArrowFunction을 이용한다.
   

        class Component extends React.Component {
                state = {
                  count: 0,
                }
        
        render() {
                  return (
                    <div>
                      <p>{this.state.count}</p>
                      <button onClick={this.click}>클릭</button>
                    </div>
                  )
                }
        
        click = () => {
                  console.log("hello")
                  this.setState((state) => ({
                    ...state,
                    count: state.count + 1,
                  }))
                }
        }