05. Event Handler

리액트에서는 이벤트를 처리하는 방식은 DOM Elements에서 처리하는 방식과 유사하다.

React에서는 소문자 대신 캐멀 케이스를 사용을 하며, jsx를 사용하여, 문자열이 아닌 함수로 이벤트 핸들러를 전달하면 된다.

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')
);

위와 같이 jsx에서 () 를 사용하지 않고 할시에는 해당 메소드를 this에 바인딩을 하거나,

화살표 함수로 선언을 하거나 콜백에 화살표 함수를 사용하는 방법도 있다.

기본적으로 React에서는 DOM element와 동일하게 event 객체를 전달해주는데, 추가적으로 파라미터를 받고 싶으면

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

위와 같이 하면된다.

화살표함수를 통해, 전달해줄 id와 events를 명시적으로 나타내거나, bind를 통해 추가적인 인자를 추가하는 방법도 있다.

아직 컴포넌트를 통해 event를 전달하는 방식은 공부하지 않았지만, 이에 대해 공부하게 되면 추가적으로 작성하겟다.

React에서 지원하는 이벤트와 events 객체 안에 있는 값들이 궁금하면.

https://ko.reactjs.org/docs/events.html

위 링크를 통해 자세하게 읽으면 된다.

코드 출처: https://ko.reactjs.org/docs/handling-events.html