[ReactJS] 이벤트 핸들링(Event Handling)

이벤트 핸들링(Event Handling)

<button onclick="activateLasers()">                                                                       
  Activate Lasers
</button>
 
<button onClick={activateLasers}>
  Activate Lasers
</button>

리액트 엘리먼트를 사용해서 이벤트를 처리하는 것은 DOM 엘리먼트에서 이벤트를 처리하는 것과 매우 유사하다

1) 반응 이벤트는 소문자가 아니라 Camel Case를 사용한다.

2) JSX에서는 문자열이 아닌 이벤트 처리기로 함수를 전달한다.

예를 들어 첫번째는 기존에 HTML 에서 이벤트를 처리하는 방식이었다.

두번째는 JSX에서 이벤트를 처리하는 방식인데 중괄호 안에 Camel Case로 이벤트를 명시하게된다.

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

또다른 차이점은, 리액트에서 기본 동작을 방지하기 위해서 false를 반환할 수 없다는 것이다.

그리고 preventDefault를 명시적으로 호출해야한다.

예를 들어, HTML 일반 새 페이지를 여는 기본 링크 동작을 방지하기 위해서 첫번째 코드처럼 코딩할 수 있다.

그러나 리액트에서는 두번째 방식처럼 코딩 해야한다.

여기서 e는 synthetic 이벤트이다

리액트는 W3C 스펙에 따라 이러한 synthetic 이벤트를 정의하므로 브라우저 간 호환성에 대해 걱정할 필요가 없다

자세한 내용은 synthetic 이벤트 가이드 페이지를 참조하기 바란다.

https://facebook.github.io/react/docs/events.html

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

ES6 클래스를 사용하여 컴포넌트를 정의 할 때 공통 패턴은 이벤트 핸들러가 클래스의 메소드가 되게 하는 것이다.

예를 들어, 위 코드의 Toggle 컴포넌트는 사용자가 "ON"과 "OFF"상태 사이를 전환할 수 있게 하는 버튼을 랜더링한다.

Toggle 클래스의 render 메소드 내부 JSX에서 this에 주목 해야한다.

자바스크립트에서는 클래스 메소드가 기본적으로 바인딩 되지 않는다.

따라서 this.handleClick을 바인딩 하고 onClick에 전달하는 것을 잊어버리면 함수가 호출될 때 에러가 발생한다.

이것은 리액트의 특징이 아니라 자바스크립트의 특징이다.

일반적으로 onClick = {this.handleClick}처럼 그 뒤에 ()가 없는 메소드를 참조하는 경우 해당 메소드를 바인딩 해야한다.