이번에 포켓몬 도감 만들기 프로젝트를 진행하던 중
한 컴포넌트 안에서 2종류의 onClick를 사용해야 했다.
현재 이 카드의 구조는
<CardBox onClick={test} data-pokemon-id={pokemon.id} type={type}>
<Img src={pokemon.img_url} alt="Pokemon" />
<Info>
NO.{pokemon.id.toString().padStart(3, "0")}
<br />
{pokemon.korean_name}
</Info>
{action && (
<AddBtn onClick={clickAction} data-pokemon={pokemon}>
{BtnName[action.name]}
</AddBtn>
)}
</CardBox>이런 형태로 CardBox를 누른다면 해당 포켓몬의 상세 페이지(현재 test로 되어있지만)로 이동하는 함수가 실행되고, 추가하기 버튼을 누른다면 해당 Action을 실행하도록 코드를 작성했다.
(혹시Action의 명칭이 의아하실 수도 있으니 설명드리면 해당 컴포넌트는 재사용을 위해 type에 따라 버튼의 동작이 달라진다.
글 작성중에 깨달았는데 AddBtn이라는 컴포넌트 이름도 바꿔야겠다.)
그런데 추가하기 버튼을 눌렀는데 상세 페이지로 이동이 되는 것이다!
사실 이전까진 상세 페이지에 정보를 가져와서 띄우는 작업을 하고 있어서 모르고 있었는데 팀원들과의 스크럼 중 코드 리뷰 및 개발 내용 피드백을 통해 알게 되었다.
(역시 팀 스크럼은 주기적으로 해야함...!)
그래서 이게 왜 그런지 찾아보니?
계층적인 HTML 구조에서 이벤트들이 존재하면 이벤트가 연쇄적으로 전파되는 이벤트 전파(Event Propagation)가 생긴다는 것을 확인했다.
해당 개념은 두 가지로 분류 되는데
버블링(Bubbling): 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파 (기본값)
캡쳐링(Capturing): 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달
현재 나의 문제는 버블링(Bubbling)이였다.
AddBtn에서 발생한 이벤트가 CardBox까지 전파된 것이기에 전파를 막아야 하는 것이였다.
해당 문제를 해결하기위한 방식은 stopPropagation() 이였다.
MDN 문서에 나와있는 내용으로 실행되는 이벤트가 더 이상 전파되지 않도록 하는 것이였다.
해당 코드를 적용하여 이벤트 전파를 막을 수 있었다. 해당 커밋내역
사실 컴포넌트를 생성할 때 한 가지의 이벤트만 넣고 실행되는 건 작은 단위의 프로젝트에선 가능할지 몰라도 실제 현업에서는 불가능에 가깝다고 생각한다. 그렇기 때문에 이번 기회를 통해 발생할 수 있는 오류에 대해서 원인과 대처 방법을 알 수 있어 한 단계 성장하는 밑거름이 된 것 같다.
