stopPropagation

stopPropagation은 이벤트 버블링을 막기 위해 존재하는 것입니다.

이벤트 버블링 이라는 단어가 생소하니 간단한 예시를 통해 알아보겠습니다.

<div onClick={closeModal}>
  <div className="modalContainer">
    <button onClick={closeModal}>CLOSE</button>
	<h1>TITLE</h1>
	<p>CONTENTS</p>
    	...
  </div>
</div>

모달 컴포넌트와 모달 밖을 클릭하면 모달이 꺼지는 예제를 React로 구현했다고 가정하겠습니다.

당연히 모달을 가지고 있는 부모 div태그를 클릭하면 꺼지게 구조를 짜면 되겠습니다만 이런식으로 작성하면 모달 자체를 클릭하기만 해도 꺼지게 되는 문제가 발생합니다.

이는 자식 태그에서 발생한 이벤트가 부모까지 전파되는 즉 이벤트 버블링 현상이 일어나기 때문입니다.

그렇다면 이제 stopPropagation을 적용한 예제를 살펴보도록 하겠습니다.

const stopPropagation = (e) => {
  e.stopPropagation();
};

<div onClick={closeModal}>
  <div className="modalContainer" onClick={stopPropagation}>
    <button onClick={closeModal}>CLOSE</button>
	<h1>TITLE</h1>
	<p>CONTENTS</p>
    	...
  </div>
</div>

이렇게 더이상 전파를 원하지 않는 태그에 이벤트를 걸어서 e.stopPropagation()을 호출하면 더이상 이벤트 전파가 일어나지 않아 모달 컴포넌트의 딤처리를 수월하게 할 수 있습니다.