기본개념
이벤트 버블링을 차단하는 것은 특정 상황에서 부모 요소로 전파되는 이벤트가 원하지 않는 동작을 일으킬 수 있기 때문입니다. 보통 부모 요소에 이벤트 리스너가 설정되어 있을 때
자식 요소에서 발생한 이벤트가 부모에게 전달되는 걸 방지하고 싶을 때 사용합니다.
아래에 몇 가지 이벤트 버블링을 차단해야 하는 예시를 들어 보겠습니다
1. 모달 창 닫기 버튼
모달 창은 자주 사용되는 UI 컴포넌트입니다. 모달 창의 배경을 클릭하면 모달이 닫히게 하는 경우, 모달 내부의 버튼을 클릭했을 때 모달이 닫히지 않도록 해야 합니다.
배경 클릭 시 모달 닫기:
모달 배경을 클릭하면 모달을 닫는 이벤트 리스너가 부모에 설정되어 있을 수 있습니다.
그런데 모달 내부 버튼을 클릭할 때, 이벤트 버블링을 차단하지 않으면 배경 클릭 이벤트까지 전파되어 모달이 닫히는 문제가 발생합니다.
// 부모 요소: 모달 배경
<div onClick={handleModalClose}>
{/* 모달 내부의 버튼 */}
<button onClick={event => event.stopPropagation()}>Click me!</button>
</div>여기서 button을 클릭하면 이벤트가 버블링되어 부모 요소로 전파되기 때문에 handleModalClose가 호출되어 모달이 닫힙니다.
event.stopPropagation()을 사용하여 부모 요소로의 이벤트 전파를 막습니다.
2. 리스트 항목 클릭 시
웹 페이지에서 리스트 항목을 클릭하면 특정 작업이 수행되는 경우가 있습니다. 예를 들어, 목록 항목을 클릭했을 때 그 항목에 대해 추가적인 동작을 수행하고, 클릭이 부모 리스트 컨테이너로 전파되어 다른 동작을 하지 않도록 해야 할 때가 있습니다.
목록에서 항목 클릭 시:
부모 요소에 onClick 이벤트가 걸려 있고, 자식 항목에서 클릭하면 부모까지 이벤트가 전파되어
원하지 않는 추가적인 작업을 하게 될 수 있습니다.
// 부모 요소: 리스트
<ul onClick={() => console.log('List clicked')}>
<li onClick={event => {
event.stopPropagation(); // 부모로의 전파를 막음
console.log('Item clicked');
}}>
Item 1
</li>
</ul>여기서 li 항목을 클릭하면 ul의 onClick 이벤트가 실행되지 않도록 event.stopPropagation()을 사용하여 부모로의 이벤트 전파를 막습니다.
3. 드래그 앤 드롭 인터페이스
드래그 앤 드롭을 구현할 때 부모 요소가 드래그 시작 이벤트나 드롭 이벤트를 처리하는 경우, 자식 요소에서 드래그나 드롭 동작을 할 때 이벤트가 부모로 전파되어 의도치 않은 동작을 할 수 있습니다.
드래그 동작 시 부모 요소에서 이벤트 처리:
부모 요소에 드래그 시작/끝 이벤트가 설정되어 있으면, 자식 요소에서 드래그를 시작할 때 부모로 전파되어 잘못된 동작이 일어날 수 있습니다.
<div onDragOver={event => console.log('Parent dragged')}>
<div
onDragStart={event => {
event.stopPropagation(); // 부모로의 전파를 막음
console.log('Item dragged');
}}
draggable
>
Drag me!
</div>
</div>여기서는 div를 드래그할 때 onDragOver 이벤트가 부모로 전파되는 걸 방지하고 있습니다.
결론
이벤트 버블링을 제어해야 할 때는 부모 요소에서 발생할 수 있는 원하지 않는 동작을 방지하기 위해 사용합니다. 주로 자식 요소에서 이벤트 처리를 하고 싶을 때 부모로 전파되는 이벤트를 막는 경우가 많습니다. event.stopPropagation()을 사용하여 이를 제어할 수 있습니다. 😊
