stopPropagation vs stopImmediatePropagation

🧩 React에서 stopPropagation() vs stopImmediatePropagation() 차이 정리

React에서 이벤트 전파를 제어할 때 흔히 사용하는 메서드가 stopPropagation()입니다.
그런데 이 외에도 같은 엘리먼트의 다른 이벤트 핸들러까지 막는
stopImmediatePropagation()이 존재합니다.

이번 글에서는 두 메서드의 차이를 예시와 함께 정리해보겠습니다.

---

1️⃣ stopPropagation() — 부모로의 이벤트 전파를 막는다

<div onClick={() => console.log("부모 div 실행")}>
  <button
    onClick={(e) => {
      e.stopPropagation()
      console.log("버튼 실행")
    }}
  >
    버튼
  </button>
</div>

🧠 결과

버튼 클릭 시 콘솔 출력:

버튼 실행

✅ 설명

• 버튼의 클릭 이벤트는 실행됨
• 하지만 부모 div의 onClick은 호출되지 않음
• 같은 엘리먼트의 다른 핸들러는 그대로 실행됨

즉, 상위로의 이벤트 전파만 막는 역할을 합니다.

---

2️⃣ stopImmediatePropagation() — 같은 엘리먼트의 다른 핸들러까지 막는다

<button
  onClick={(e) => {
    e.nativeEvent.stopImmediatePropagation()
    console.log("첫 번째 핸들러 실행")
  }}
  onClick={() => console.log("두 번째 핸들러 실행")}
/>

🧠 결과

버튼 클릭 시 콘솔 출력:

첫 번째 핸들러 실행

✅ 설명

• 첫 번째 핸들러만 실행되고,
• 두 번째 핸들러는 실행되지 않음
• 부모로의 이벤트 전파도 완전히 차단됨

즉, 같은 엘리먼트 내의 다른 이벤트 핸들러까지 모두 막습니다.

---

⚖️ 정리

구분	stopPropagation()	stopImmediatePropagation()
기능	부모로의 이벤트 전파 차단	부모 + 같은 엘리먼트의 다른 핸들러 차단
영향 범위	상위 엘리먼트까지	동일 엘리먼트 내의 다른 핸들러까지
React 사용 시 주의점	일반적으로 가장 많이 사용	nativeEvent 접근 필요 (e.nativeEvent.stopImmediatePropagation())

---

🎯 결론

• 부모 컴포넌트로 이벤트가 올라가지 않게만 하려면
  → stopPropagation()

• 현재 엘리먼트의 다른 핸들러 실행도 완전히 막고 싶다면
  → stopImmediatePropagation()

두 메서드는 비슷해 보이지만, 이벤트 전파의 차단 범위가 다르기 때문에
필요한 상황에 맞게 선택하는 것이 중요합니다.