리액트 이벤트 버블링 & 이벤트 캡쳐

📌 리액트의 이벤트 버블링(Event Bubbling) & 이벤트 캡처링(Event Capturing)

리액트에서 이벤트가 발생할 때, 이벤트는 특정 요소에서 시작하여 부모 요소로 전파될 수 있다.
이러한 전파 방식에는 이벤트 버블링(Event Bubbling)과 이벤트 캡처링(Event Capturing)의 두 가지 개념.

 

 

✅ 1. 이벤트 버블링(Event Bubbling)

📌 개념

이벤트가 가장 안쪽의 요소에서 시작하여 부모 요소로 전파되는 방식입니다.

💡 이벤트가 발생하면 먼저 해당 요소에서 실행된 후, 부모 요소로 이벤트가 전달됩니다.
(ex. 클릭 시, 자식 → 부모 → 더 상위 부모 순으로 전달)

 

📌 예제 (버블링 발생)

import React from "react";

function BubblingExample() {
  const handleChildClick = () => {
    alert("🟢 자식 요소 클릭됨");
  };

  const handleParentClick = () => {
    alert("🔵 부모 요소 클릭됨 (버블링으로 전파)");
  };

  return (
    <div onClick={handleParentClick} style={{ padding: "20px", border: "2px solid blue" }}>
      <button onClick={handleChildClick} style={{ padding: "10px" }}>
        클릭하세요 (자식)
      </button>
    </div>
  );
}

export default BubblingExample;

 

📌 실행 결과

1️⃣ 버튼을 클릭하면 자식 요소의 이벤트(handleChildClick)가 먼저 실행됨
2️⃣ 이후 부모 요소의 이벤트(handleParentClick)도 실행됨 → 버블링 발생

✅ 즉, 이벤트가 부모 요소로 전파됨!

 

 

---

 

🛑 이벤트 버블링 막기 (stopPropagation)

이벤트 버블링을 원하지 않는다면, event.stopPropagation()을 사용.

📌 버블링 차단 예제

const handleChildClick = (event) => {
  event.stopPropagation(); // 이벤트 전파 방지
  alert("🟢 자식 요소 클릭됨 (버블링 차단)");
};

이제 부모 요소의 이벤트는 실행되지 않음!

 

---

✅ 2. 이벤트 캡처링(Event Capturing)

📌 개념

이벤트가 가장 바깥쪽(부모) 요소에서 시작하여 자식 요소로 전달되는 방식.

💡 부모에서 먼저 이벤트를 감지한 후, 자식으로 전달됨

📌 예제 (캡처링 발생)

리액트에서는 onClickCapture를 사용하면 이벤트가 부모에서 먼저 실행.

function CapturingExample() {
  const handleChildClick = () => {
    alert("🟢 자식 요소 클릭됨");
  };

  const handleParentClick = () => {
    alert("🔵 부모 요소 클릭됨 (캡처링)");
  };

  return (
    <div onClickCapture={handleParentClick} style={{ padding: "20px", border: "2px solid red" }}>
      <button onClick={handleChildClick} style={{ padding: "10px" }}>
        클릭하세요 (자식)
      </button>
    </div>
  );
}

 

📌 실행 결과

1️⃣ 버튼 클릭 시, 부모 요소 이벤트(handleParentClick)가 먼저 실행됨
2️⃣ 이후 자식 요소 이벤트(handleChildClick)가 실행됨

✅ 즉, 이벤트가 부모 → 자식 순으로 전달됨

 

---

 

🎯 이벤트 버블링 vs 캡처링 차이

개념	동작방식	실행 순서
이벤트 버블링	자식 → 부모 방향으로 이벤트 전파	자식 → 부모
이벤트 캡처링	부모 → 자식 방향으로 이벤트 전파	부모 → 자식

 

 

🚀 실전에서 활용 방법

1. 버블링을 활용하여 부모에서 이벤트를 감지
   • 부모 요소에서 한 번만 이벤트를 처리할 수 있도록 최적화 가능
   • 예: 리스트 항목 클릭 시 부모에서 이벤트 감지
2. 캡처링을 사용하여 특정 요소에서 먼저 이벤트 감지
   • 예: onClickCapture를 활용하여 특정 요소에서 우선적으로 이벤트 처리
3. stopPropagation()으로 불필요한 이벤트 전파 방지
   • 특정 이벤트가 부모로 전달되지 않도록 막을 때 사용

 

 

🔥 결론

• 기본적으로 리액트의 이벤트는 "버블링" 이 기본 동작
• onClickCapture를 사용하면 이벤트 캡처링이 발생
• 필요에 따라 event.stopPropagation()으로 이벤트 전파를 막을 수 있음

💡 React에서 이벤트를 효율적으로 제어하려면, 버블링과 캡처링의 차이를 이해하는 것이 중요! 🚀