[JavaScript] 이벤트 전파 중단하기

 

 

 

 

이벤트 전파에 대한 예시를 생각하다 트위터 서비스의 예시가 이해하기 적절하다고 생각했다. posts 페이지에서 여러 트윗 목록을 볼 수 있다고 가정하자. 하나의 트윗에 답글 기능, 리트윗 기능, 마음 기능, 북마크 기능 등 여러 버튼이 하단에 배치해 있고 각각의 클릭 이벤트에 대한 콜백 함수가 등록되어 있을 것이다. 그리고 그 외의 공간을 클릭하면 해당 트윗에 대한 post 페이지로 이동하는 콜백함수가 등록되어 있다. 코드로 작성한다면 다음과 같이 될 것이다.

 

<li onClick={() => router.push(`/post/${postId}`)}>
  <div>// ...</div>
  <div>
    	<button onClick={onReplyClick}><ReplyIcon /></button>
    	<button onClick={onReTweetClick}><ReTweetIcon /></button>
    	<button onClick={onHeartClick}><HeartIcon /></button>
    	<button onClick={onBookmarkClick}><BookmarkIcon /></button>
  </div>
 </li>

 

상위 요소에 클릭 시 post 페이지로 이동하는 콜백 함수가 등록되어 있고, 하위 버튼 요소에 각각의 클릭 이벤트에 대한 콜백함수가 등록되어 있는 구조이다. 우리는 각 버튼을 누르면 해당 기능에 대한 동작만을 기대하지만 버튼을 누르면 post 페이지로 이동하게 되는 이슈가 발생한다. 이는 이벤트 버블링으로 이벤트가 발생한 요소부터 상위에 도달하기까지 이벤트가 전파된다는 특성이 있기 때문이다.

 

이 이슈를 해결하기 위해서는 이벤트 전파를 막아야한다. 이벤트 전파를 막을 수 있는 stopPropagation 메소드가 있다. 각 하단의 콜백함수에서 이벤트를 받아 stopPropagation 호출 후 로직을 작성하면 해결된다.

 

onReplyClick = (e) => {
    e.stopPropagation()
    // ...
}