[React18] 4. 이벤트 핸들러

 

React에서는 JSX에 이벤트 핸들러를 추가할 수 있습니다. 이벤트 핸들러는 click, hover, input, focus 등 사용자 상호작용에 따라 유발되는 사용자 정의 함수입니다. 

 

이벤트 핸들러 추가를 위해서는 먼저 함수를 정의하고 이를 적절한 JSX 태그에 prop 형태로 전달해야 합니다. 일반적으로 이벤트 핸들러의 이름은 handle 뒤에 이벤트 이름을 붙입니다. 

 

만약 뒤에 () 있다면 렌더링 중에 클릭이 없음에 불구하고, 즉시 함수를 실행합니다. (ex onClick={handleClick()}) 인라인으로 코드를 작성해야 한다면 익명함수로 감싸서 호출할 함수를 생성해야 합니다. (onClick={()=>console.log('Click')}) 

 

** 종종 부모 컴포넌트로 자식의 이벤트 핸들러를 지정하기를 원할 수 있습니다. 이때 props로 이벤트 핸들러를 자식 컴포넌트로 전달되며, 관습적으로 이벤트 핸들러 prop의 이름은 on으로 시작하여 대문자 영문으로 이어집니다. 

 

export default function Button() {
  function handleClick() {
    console.log('Click');
  }

  return (
    <button onClick={handleClick}>
      Click
    </button>
  );
}

 

이벤트 전파

이벤트 핸들러는 컴포넌트에 있는 모든 하위 컴포넌트의 이벤트를 수신할 수 있습니다. 이벤트가 발생하는 곳에서 시작하여 트리 위로 이벤트가 '버블' 또는 '전파' 됩니다. (ex 자식 컴포넌트 클릭 이벤트 발생 → 부모 컴포넌트 클릭 이벤트 발생)

 

이벤트 핸들러는 이벤트 객체를 매개변수로 받고, 관습적으로 event(e)로 호출되는 것이 일반적입니다. 이러한 이벤트 객체를 활용해 event.stopPropagation() 호출해 전파를 막을 수 있습니다.

 

function Button({ onClick }) {
  return (
    <button onClick={e => {
      e.stopPropagation();
      onClick();
    }}>
      click
    </button>
  );
}

 

** 드물지만 하위 요소에서 전파가 중지된 경우에도 하위 이벤트를 포착해야 하는 경우가 있습니다. 이를 위해서는 이벤트명 마지막에 Capture를 추가하면 됩니다. (아래로 전달하면서 onClickCaputre 핸들러 호출 → 클릭한 요소 onClick 핸들러 실행 → 위로 전달하면서 모든 onClick 핸들러를 호출)

 

** event.stopPropagation()와 event.preventDefault() 혼동하는 경우가 있는데  event.stopPropagation()는 이벤트 핸들러의 전파를 중지하고 event.preventDefault()는 몇 가지 이벤트에 대해 기본 브라우저 동작을 방지합니다. (ex form에서 sumbit 이벤트는 버튼 클릭 시 페이지 전체를 리로드하는 것을 막기 위해서는 event.preventDefault() 사용해야 합니다.)

 

---

 

** React18 공식 문서 보고 정리한 내용입니다.

https://ko-react-exy5xcwjj-fbopensource.vercel.app/learn/responding-to-events

이벤트에 응답하기 – React