리액트 6 - 이벤트 처리하기

오늘 알아볼 것

• 이벤트

리액트에서 이벤트를 처리하는 방식

• 리액트의 이벤트는 소문자 대신 카멜케이스를 사용한다.
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

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

• flase를 반환해도 기본 동작을 방지 할 수 없다.(preventDefalut를 명시적으로 호출해야 함)

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

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

• addEventListener를 호출할 필요가 없고, 엘리먼트가 렌더링될때 리스너를 제공한다.

render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }

JSX 콜백 안에서 this

javaScript에서 클래스 메서드는 기본적으로 바인딩되어 있지 않다. this.handleClick을 바인딩 하지 않고 onClick에 전달하였다면, 함수가 실제 호출될 때 this는 undefined가 된다.

바인딩
프로그램에 사용된 구성요소의 실제 값 또는 프로퍼티를 결정짓는 행위
어떤 기본 단위가 가질 수 있는 구성요소의 구체적인 값, 성격을 확정짓는 것

일반적으로 onClick={this.handleClick}과 같이 뒤에 ()를 사용하지 않고 메서드를 참조할 경우, 해당 메서드를 바인딩 해야 한다.

class LoggingButton extends React.Component {
  // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
  // 주의: 이 문법은 *실험적인* 문법입니다.
  handleClick = () => {
    console.log('this is:', this);
  }

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

OR 콜백에 화살표 함수를 사용하는 방법도 있다.