[React] 이벤트 처리

• React의 이벤트는 소문자 대신 camelCase를 사용합니다.

<button onClick={activateLasers}>
  Activate Lasers
</button>

바른 사용법 onClick={activateLasers} 입니다.
onClick="activateLasers" 아닙니다.

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

반드시 preventDefault를 호출해야 합니다. flase를 반환해도 기본 동작을 방지할 수 없습니다. 따라서 기본 동작을 방지하기 위해 preventDefault를 명시해줍니다.

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

    // This binding is necessary to make `this` work in the callback
    // 콜백에서 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')
);

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

루프 내부에서 이벤트 핸들러에 추가적인 매개변수를 전달하는 것이 일반적입니다. 예를 들어, id가 행의 ID일 경우 다음 코드가 모두 작동합니다.

아래에서 id 어디나왔냐고 찾지 말자.. 예를 들어놨을 뿐이니까..

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

결과는 같으며, 화살표 함수와 Function.prototype.bind 를 사용한 차이일 뿐입니다.

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