[React.js] 6. Event

React 공홈에서는 아래와 같은 규칙이 있다고한다.

 

- React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다.
- JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다.

 

html 과 React의 차이를 보면 한번에 알 수 있었다.

 

<!-- 일반적인 HTML -->
<button onclick="activateLasers()">
  Activate Lasers
</button>

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

 

또한, 태그가 가지는 고유한 기능(?) 을 사용하지 않기위해 아래와 같이 사용하지만, React 에서는 명시적으로 고유한 기능을 쓰지 않을거라고 알려주어야한다. (preventDefault를 사용하면 된다.)

 

<!-- HTML -->
<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submit</button>
</form>

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

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

 

 

 

Javscript에서 클래스 메서드는 기본적으로 바인딩되어 있지않다.

그래서 따로 바인딩을 해주지 않았다면, this를 사용할 수 없게 되므로 constructor 안에서 바인딩시켜주는 것이 좋다.

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

 

 

 

 

이벤트 핸들러에 값 전달

 

bind함수 또는 arrow function을 사용하여 전달한다.

bin함수 사용시 명시적으로 인자를 전달해야하고,

arrow function 사용시 추가 인자가 자동으로 전달된다.

 

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