React 이벤트 버블링 문제

문제

카드의 하트를 클릭시 찜하기 기능, 카드 클릭시 상세페이지로 이동하는 기능을 구현하다가 Favorite을 클릭해도 상세페이지로 navigate되는 문제가 생겼다.

 

문제는 아래 코드에서 발생하였다.

이벤트의 버블링 때문에 생긴 문제인데, Favorite을 눌렀을 때 해당 이벤트가 상위 엘리멘트로 전파되면서 navigate이 실행된 것이다.

 

버블링

DOM트리에서 이벤트가 발생한 요소에서 상위 요소로 전파되는 현상이다.  이 때문에 종종 의도치 않은 동작을 유발 할 수 있다.

 

해결과정

이벤트 전달 방지

해결을 위해 먼저 이벤트 핸들러 함수에 event를 전달하기로 했다. 이렇게 하면 event 객체에 접근할 수 있어서 event에 대한 제어가 가능하다.

 

이벤트 핸들러 함수 수정

그리고 favoriteSwitch 함수에서 전달받은 event 객체를 활용해서 이벤트 전파를 막아주었다.

event.stopPropagation()은 이벤트의 버블링을 중단시키는 메서드이다. 이 메서드를 호출하면, 현재 이벤트가 상위 요소로의 전파를 막아 이벤트가 더 이상 상위로 전달되지 않게 된다.

 

event.stopPropagation()은 여러 개의 중첩된 요소가 있을 때 하위 요소에서 발생한 이벤트가 상위 요소로 전파되어 상위 요소의 이벤트 핸들러까지 동작한다면, 이를 방지하기 위해 event.stopPropagation()를 사용할 수 있다.