[React] 이벤트 핸들러 사용 시 주의할 점

⚠️리액트 이벤트 핸들러 사용 시 주의해야 할 점들

1) 이벤트 전파

자식 컴포넌트의 이벤트를 부모 컴포넌트가 수신할 수 있다. 트리를 따라 자식에서 부모로 ‘전파’된다고 한다. onscroll을 제외한 모든 이벤트는 React에서 전파된다.

이벤트 핸들러는 이벤트 오브젝트를 유일한 매개변수로 받는다.

이벤트 핸들러가 부모 컴포넌트로 전파되지 못하게 하려면 e.stopPropagation() 을 첫 번째 매개변수로 호출하면 된다.

<button
      onClick={e => {e.stopPropagation();
                    onChangeColor()}}
  >

이런 식으로 e.stopPropagation() 이후에 새로운 이벤트를 추가하는 것도 가능하다. onClick()도 가능함

2)기본 동작 방지

일부 브라우저 이벤트는 기본 브라우저 동작을 한다. 예를 들어, form 태그의 제출 버튼 클릭 시 페이지 전체가 리로드된다. 이때 e.preventDefault() 를 사용해 주면 된다.

출처 리액트 공식문서 https://ko.react.dev/learn/responding-to-events