React의 이벤트 핸들러 특징과, 이벤트 처리하는 법 알아보기

❓ Event Handing

event: 웹 내부에서 발생하는 사용자의 행동
ex) 버튼 클릭, 페이지 스크롤, 새로고침
handling: 다루다, 취급하다, 처리하다

Event Handling: 이벤트가 발생했을 때 그것을 처리하는 것
ex) 버튼 클릭시 경고창 노출

리액트의 이벤트 핸들링

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

  return
    <button onClick={handleOnClick}>
      클릭하세요
    </button>
  );
}

이벤트 핸들러 표기에서 리액트는 카멜 케이스 문법에 따라 onClick으로 표기합니다. (HTML 버전: onclick) 또한 이벤트 핸들러를 설정할 때는 함수 호출의 결괏값을 전달하는 것이 아니라 콜백 함수처럼 함수 그 자체를 전달합니다.

// html, js에서 이벤트 핸들러 설정
<button onclick="handleOnClick()">click</button>

이벤트 객체 사용하기

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

function Body() {
  function handleOnClick(e) {
    console.log(e);
    console.log(e.target.name);
  }
  return (
      <button name="A버튼" onClick={handleOnClick}>
        A button
      </button>
  );
}
 //SyntheticBaseEvent {_reactName: `onClick...
 //A버튼

이벤트 객체의 target 프로퍼티에는 이벤트가 발생한 페이지의 요소(여기서는 버튼)가 저장됩니다. 따라서 A button을 클릭하면 함수 handleOnClick에 이벤트 정보가 저장되고, SyntheticBaseEvent(합성 이벤트객체)가 하나 출력됩니다. 또한 현재 이벤트가 발생한 요소인 A button의 name 속성값을 출력하게 됩니다.

합성 이벤트 객체란, 모든 브라우저에서의 이벤트 객체를 하나로 통일한 형태로 크로스 브라우징 문제를 방지해줍니다.

🔗참고 자료
한 입 크기로 잘라먹는 리액트