리액트에서는 어떻게 이벤트를 핸들링하는지 알아본다.

function Body() {
  function handleOnClick() { ①
    alert("버튼을 클릭하셨군요!");
  }

  return (
    <div className="body">
      <button onClick={handleOnClick}>클릭하세요</button> ②
    </div>
  );
}
export default Body;

리액트의 이벤트 핸들링은 HTML의 이벤트 핸들링과 흡사하지만, 차이점이 몇 가지 있다.

1. 리액트는 카멜 케이스 문법을 따른다.
2. Props로 전달할 값을 지정할 때처럼 onClick={} 문법으로 이벤트 핸들러를 설정한다. 또한, 이벤트 핸들러를 설정할 때는 함수 호출의 결괏값을 전달하는 것이 아니라 콜백함수처럼 함수 그 자체를 전달한다.

이벤트 객체 사용하기

리액트에서는 이벤트가 발생하면 이벤트 핸들러에게 이벤트 객체를 매개변수로 전달한다. 이벤트 객체에는 이벤트가 어떤 요소에서 어떻게 발생했는지에 관한 정보가 상세히 담겨 있다.

function Body() {
  function handleOnClick(e) { ①
    console.log(e.target.name);
  }
  return (
    <div className="body">
      <button name="A버튼" onClick={handleOnClick}> ②
        A 버튼
      </button>
      <button name="B버튼" onClick={handleOnClick}> ③
        B 버튼
      </button>
    </div>
  );
}

export default Body;

이벤트 객체의 target 프로퍼티에는 이벤트가 발생한 페이지의 요소*여기서는 버튼 이 저장된다. 따라서 함수 handleOnClick에서 e.target.name을 출력하면 각각 A버튼, B버튼이 출력되게 될 것이다.

콘솔에 이벤트 객체를 출력해 보면 프로퍼티들을 확인할 수 있다. 그러나 아주 복잡한 이벤트 처리가 아니라면 실무에서는 대체로 한두 개의 값만 활용하므로 이 값들을 모두 상세히 알 필요는 없다.