[React] 이벤트 버블링(Event Bubbling)이란?

 

이벤트 버블링(Event Bubbling)이란?

• HTML 요소에서 발생한 이벤트가 해당 요소의 부모 요소로 전파되는 현상을 말합니다.
• 즉, 하위 요소에서 발생한 이벤트가 상위 요소로 전달되는 과정을 의미합니다.
• 이벤트 버블링은 이벤트가 발생한 요소에서 시작해서 가장 최상위의 조상 요소까지 이벤트가 전파됩니다.
• 이때, 각 요소의 이벤트 핸들러가 호출되며 이벤트 처리가 이뤄집니다.
• 이는 DOM(Document Object Model)의 트리 구조를 기반으로 하고 있습니다.

 

예시

<div onClick={() => {console.log(상위 클릭)}}>
  <span onClick={() => console.log("하위 클릭")}>Click me!</span>
</div

 

-> span 태그인 Click me!를 클릭하면, span 태그를 감싸고 있는 div 태그의 onClick 이벤트도 같이 실행된다.

-> 이는 이벤트가 발생한 요소에서 시작해서 상위로 전파되는 이벤트 버블링의 특성을 보여준다.

---

이벤트 버블링(Event Bubbling) 막는 방법

<div onClick={() => {console.log(상위 클릭)}}>
  <span onClick={(e) => {e.stopPropagation(); console.log("하위 클릭")} }>Click me!</span>
</div

 

-> onClick 함수의 콜백함수에 파라미터 e를 넣고, return 부분에 e.stopPropagation()를 작성한다.