React의 Event Handling

React의 이벤트 처리방법은 DOM 엘리먼트와 흡사하지만 차이점이 존재

React 엘리먼트의 Event Handling은 DOM 엘리먼트의 Event Handling과 비교하면 매우 흡사하지만 몇 가지 문법 차이가 존재한다.

• React의 Event Handling은 소문자 대신 카멀 케이스(camelCase)를 사용한다.

• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

아래 코드는 DOM 엘리먼트와 React 엘리먼트의 Event Handling을 비교한다.

// DOM element
<button onclick="onClickBtn()">
  Click Me!!
</button>

// React element
<button onClick={onClickBtn}>
  Click Me!!
</button>

preventDefault

또한 React에서는 false를 반환해도 기본 동작을 방지할 수 없기 때문에 반드시 preventDefault를 명시적으로 호출해야 한다.

아래 코드는 DOM 엘리먼트와 React 엘리먼트의 <Form>의 Submit Event를 비교한다.

// DOM element
<form onsubmit="console.log('Form을 제출했습니다!'); return false">
  <button type="submit">제출</button>
</form>

// React element
function LoginForm() {
  function onSubmitForm(e) {
    e.preventDefault();
    console.log('Form을 제출했습니다!');
  }

  return (
    <form onSubmit={onSubmitForm}>
      <button type="submit">제출</button>
    </form>
  );
}

addEventListener

React는 엘리먼트가 처음 렌더링될 때 리스너를 제공하기 때문에 생성된 후addEventListener를 호출할 필요가 없다.

그래서 클래스 컴포넌트를 사용할 때 클래스의 메서드로 이벤트 핸들러를 작성한다.

이 때 콜백 안에서 사용되는 this는 JavaScript의 클래스 메서드이므로 기본적으로 바인딩 값이 정해져 있지 않다는 점을 주의해야한다.

그래서 이벤트 핸들러를 호출하지 않고 참조를 하는 경우에는 해당 메서드를 바인딩하거나 클래스 필드 또는 화살표 함수등을 사용해야 한다.

class FruitToggleBtn extends React.Component {
  constructor(props) {
    super(props);
    this.state = {toggledOn: true};

    this.onClickBtn = this.onClickBtn.bind(this); // 해당 메서드를 바인딩
  }

  onClickBtn() {
    this.setState(prevState => ({ // prevState는 이전의 state값을 의미
      toggledOn: !prevState.toggledOn
    }));
  }

  render() {
    return ( 
      <>
        <h1>사과는 맛있다 ?</h1>
        <button onClick={this.onClickBtn}>
          {this.state.toggledOn ? 'Yes!!' : 'No!!'}
        </button>        
      </>      
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FruitToggleBtn />);

참고 자료

React 공식문서
웹 게임을 만들며 배우는 React - 제로초