[Trouble Shootings #2] React - 여러 이벤트 간의 관계 (feat. stopPropagation)

오늘 회사에서 작업을 하다가 구글링을 통해 잊어버렸던 JS 개념을 활용해 해결하였습니다.

 

사전에 퍼블리싱한 버튼이 있었는데

 

outer container에 button 클릭 이벤트 핸들러가 있고

 

그리고 position: absolute; 로 설정한 -, + 버튼이 각각 왼쪽과 오른쪽 끝에 붙어 있었습니다.

 

한 곳에 총 3개의 버튼이 있고 각각 3개의 이벤트 핸들러가 걸려 있어서

 

이벤트 버블링이 일어나면서 중복 발생하기도 하였습니다.

 

순서가 꼬이는 경우도 가끔 발생하여 이런 이슈를 어떻게 해결할지 구글링을 하였습니다.

 

사전에 이와 같은 방식으로 html, css 퍼블리싱을 하지 않았더라면 좀 더 나았을 것 같기도 한데

 

우선 해결이 필요합니다.

 

끝내 찾은건 event.currentTarget.stopPropagtaion()을 통해

 

해당 currentTarget 에서 상위로 버블링 되어 상위 이벤트까지 호출되는 것을 막아서

 

해당 요소에서만 이벤트 핸들러가 실행되도록 하는 것입니다.

 

사전에 좀 더 나은 설계를 했으면 이런 함수가 필요했을까 싶기도 하지만

 

추후 버그나 수정사항이 있으면 계속 업데이트하여 기록하겠습니다.

---