이벤트 제어하기

React 요소의 이벤트를 제어하는 건 DOM 요소 이벤트를 제어하는 것과 매우 유사합니다. 몇가지 문법적인 차이가 있습니다.

React 이벤트는 소문자 대신 camelCase를 사용합니다.
JSX에 문자열 대신 함수를 전달합니다.

예를 들어 HTML에서 이벤트를 넣을 때,

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

위 예제는 React에서는 조금 다릅니다.

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

다른 차이점으로는 React에서 기본 동작을 막기 위해 false 리턴을 사용할 수 없다는 것입니다. 반드시 명시적으로 preventDefault 를 호출해야 합니다. 예를 들어 HTML에서 새로운 페이지를 여는 기본 링크 동작을 막으려면 이렇게 작성할 수 있습니다.

<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

React에서는 대신 이렇게 작성합니다.

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

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

여기서 e 는 합성 이벤트입니다. React는 W3C spec 에 따라 이런 합성 이벤트를 정의하므로 브라우저 간 호환성을 걱정할 필요는 없습니다. 더 자세한 사항은 SyntheticEvent 레퍼런스 가이드를 보시길 바랍니다.

React를 사용할 때 일반적으로 DOM 요소가 생성된 후에 리스너를 추가하기 위해 addEventListener 를 호출할 필요가 없습니다. 대신 요소가 처음 렌더링될 때 리스너를 제공합니다.

ES6 class 를 이용해 요소를 정의할 때 이벤트 핸들러의 일반적인 패턴은 클래스의 메서드 형태입니다. 예를 들어, 아래 Toggle 컴포넌트는 “ON” 과 “OFF” state를 유저가 토글할 수 있게 하는 버튼을 렌더링합니다.

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

Try it on CodePen.

JSX 콜백에서 this 의 의미에 대해 주의해야합니다. 자바스크립트에서 클래스 메서드는 기본적으로 bound 되지 않습니다. 만약 this.handleClick 바인드를 잊은채로 onClick 에 전달하면, this 는 함수가 실제로 호출될 때 undefined 로 취급됩니다.

이건 React에서 정의한 동작이 아닙니다. 자바스크립트의 함수의 동작 방식 의 일부입니다. 일반적으로 onClick={this.handleClick} 처럼 () 없이 메서드를 참조하면, 그 메서드를 bind 해야합니다.

만약 bind 를 호출하는 게 귀찮은 경우 이 문제를 해결할 수 있는 두가지 방법이 있습니다. 만약 실험 기능인 퍼블릭 클래스 필드 문법 을 사용한다면 클래스 필드를 정확히 콜백에 bind할 수 있습니다.

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

이 문법은 Create React App 에서 기본으로 사용할 수 있습니다.

만약 클래스 필드 문법을 사용하고 싶지 않다면, 콜백에서 arrow function 을 사용할 수도 있습니다.

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

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

이 문법의 문제점은 LogginButton 을 렌더링할 때마다 서로 다른 콜백이 만들어지는 것입니다. 대부분의 경우에서 크게 문제는 없습니다. 하지만 만약 콜백에서 하위 컴포넌트에 prop을 전달하는 경우, 이 컴포넌트는 큰 비용으로 다시 렌더링될 수 있습니다. 이런 종류의 성능 문제를 피하기 위해 보통 생섬자 함수에서 바인딩하거나 클래스 필드 문법을 사용하는 걸 권장합니다.

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

반복 안에서 보통 이벤트 핸들러에 추가 파라미터를 전달하고 싶어할 것입니다. 예를 들어, 만약 id 가 원시적인 ID라면, 아래처럼 전달할 수 있습니다.

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

위 두 라인은 동일하며, arrow functions과and Function.prototype.bind 를 각각 사용하고 있습니다.

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

Edit this page