이벤트 처리하기

아래 내용은 리액트 공식문서를 보고 정리한 내용입니다.

 

클래스의 메서드로 만들기 - constructor 안에서 바인딩해주기

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isToggleOn: true };

    // ✅ 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다.
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState((prevState) => ({ isToggleOn: !prevState.isToggleOn }));
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        {" "}
        {this.state.isToggleOn ? "ON" : "OFF"}
      </button>
    );
  }
}

ReactDOM.render(<Toggle />, document.getElementById("root"));

퍼블릭 클래스 필드 문법 사용하기 - 실험적 / 사용하지 않기

class LoggingButton extends React.Component {
  /* 퍼블릭 클래스 필드 문법
  이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.  
  * 주의: 이 문법은 *실험적인* 문법입니다.  
  * handleClick = () => { console.log('this is:', this);  }
  */
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

실험적인 퍼블릭 클래스 필드 문법은 Create React App에서 이 문법이 기본적으로 설정 되어있음.

콜백에 화살표 함수 사용하기

class LoggingButton extends React.Component {
  handleClick() {
    console.log("this is:", this);
  }

  render() {
    // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
    return <button onClick={() => this.handleClick()}> Click me</button>;
  }
}

🛑 LoggingButton이 렌더링 될때마다 다른 콜백이 생성.
대부분의 경우 괜찮지만, 콜백이 하위 컴포넌트에 props로 전달된다면 그 컴포넌트들은 추가로 다시 렌더링을 수행 --> 성능문제 발생
따라서, 생성자 안에서 바인딩하거나 클래스 필드 문법 사용하자.

이벤트 핸들러에 인자 전달하기

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow(this, id)}>Delete Row</button>

이벤트를 나타내는 e인자가 ID 뒤에 두번째 인자로 전달.
화살표 함수를 사용하면 명시적으로 인자를 전달해야함.
반면 bind를 사용할 경우 추가 인자가 자동으로 전달.