3.5.4 이벤트 전파

JSX 요소에서도 기존 DOM과 마찬가지로 이벤트 전파가 발생합니다. 이벤트 전파(event propagation)란 이벤트가 발생했을 때 부모 또는 자식 요소로 전달되는 현상을 의미합니다.

이벤트 전파에는 캡처링과 버블링 두 가지가 있습니다.

● 캡처링

캡처링(capturing)은 이벤트가 부모 요소에서 시작해 자식 요소로 내려가는 방식입니다. 리액트에서 캡처링을 처리하려면 이벤트 속성에 Capture를 붙여 사용해야 합니다.

다음 코드는 onClick 이벤트 속성에 Capture를 붙인 onClickCapture 이벤트 속성을 사용합니다.

src/App.tsx

export default function App() {
  const handleCapture = () => {
    console.log('Parent');
  };
  const handleBubble = () => {
    console.log('Child');
  };