Event Handling

함수형 Component에서 Event Handling 다루기

function Component() {
  return <div><button onClick={() => {
        console.log('clicked');
      }}>클릭</button></div>
}

ReactDOM.render(<Component />, document.querySelector('#root'))

클래스형 Component에서 Event Handling 다루기

• 기본

class Component extends React.Component {
  render () {
    return <div><button onClick={() => {
        console.log('clicked');
      }}>클릭</button></div>
  }
}
ReactDOM.render(<Component />, document.querySelector('#root'))

• state를 사용해 EventHandling 해보기

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


ReactDOM.render(<Component />, document.querySelector('#root'));

#class Component내에서 만든 메소드를 EventHandlings로 사용할 때

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={this.click}>
        클릭
        </button>
      </div>
    )       
  }
  click() {
          console.log('clicked');
          this.setState( (state) => 
                        // 이 지점의 this는 clcick()를 가리키기 때문에
                        // Component의 state에 접근할 수 없음.
                        // this를 따로 bind해줘야함
           ({ ...state,
            count : state.count +1,
             }))
  
  }
}


ReactDOM.render(<Component />, document.querySelector('#root'));

• this에 바인드 해주는 방법

  • constructor에 클래스의 this를 바인드

  class Component extends React.Component {
    state = {
      count : 0,
    };
    constructor(props) { 
      super(props);
      this.click = this.click.bind(this); // bind함수를 이용
    }
    render () {
      return (
        <div>
          <p>{this.state.count}</p>
          <button onClick={this.click}>
          클릭
          </button>
        </div>
      )       
    }
    click() {
            console.log('clicked');
            this.setState( (state) => 
                 // 이 시점 this는  click()이 아니라 Component를 가르킴
             ({ ...state,
              count : state.count +1,
               }))
  
    }
  }
  ReactDOM.render(<Component />, document.querySelector('#root'));

  • Arrow 함수를 이용

  class Component extends React.Component {
    state = {
      count : 0,
    };
    render () {
      return (
        <div>
          <p>{this.state.count}</p>
          <button onClick={this.click}>
          클릭
          </button>
        </div>
      )       
    }
    click = () => { 
      		// 추측하기론 익명 함수이므로 this는 더 상위요소인 Component를 가르키는게 아닐까....?
            console.log('clicked');
            this.setState( (state) => 
                 // 이 시점 this는  click()이 아니라 Component를 가르킴
             ({ ...state,
              count : state.count +1,
               }))
  
    }
  }
  ReactDOM.render(<Component />, document.querySelector('#root'));