이벤트 사용

  • React의 이벤트는 camelCase 를 사용.
  • JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러 전달.
// HTML
<button onClick="activatelaser()">
  Activate Lasers
</button>

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

preventDefault()

  • 이벤트 전파방지 사용하기 위해서 return false를 사용할 수 없기 때문에 preventDefault()를 사용.
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick]}>
      Click me
    </a>
  );
}

bind(this)

  • JavaScript에서 클래스 메서드는 기본적으로 바인딩되어 있지 않음.
  • this.handleClick을 바인딩하지 않고 onClick에 전달했다면, 실제 호출시 this는 undefined가 된다.
class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    // 콜백에서 'this'가 작동되려면 바인딩을 해줘야 함.
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState( state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}
ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

no bind

  • bind 호출이 불편할 때,
  • 퍼블릭 클래스 필드 문법(Experimental) 을 사용하고 있다면,
  • this.method 로 콜백 전달하면 자동 바인딩.
  • 단, handleClick() { .. } 로 정의하면 바인딩 안됨.
  • handleClick = () => { ... } 형태로 정의할것.
class LoggingButton extends React.Component {
  // handleClick() { .. } 로 정의하면 바인딩 안됨
  handleClick = () => {
    console.log('this is: ', this);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

이벤트 핸들러에 인자 전달

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

참고자료