Portfolio

🔥 문제

저는 예전부터 리액트를 할 때, 자식 컴포넌트를 클릭할 때 부모 컴포넌트가 동작하지 않도록 할 때에는 직접 DOM을 건드려야만 했습니다. 솔직히, 이를 제대로 구현하지 못해왔음을 고백합니다.

실제로 지난 프로젝트에서도 해당 로직을 구현할 때, closest를 적극적으로 활용하면서 해결했습니다.

하지만 오늘에서야 알았습니다. 이를 어떻게 해결해야 하는지를 말입니다.

💡

이 글은, 이벤트 버블링과 캡쳐링에 대해 얼추 알고 있지만 실제로 써본 적은 없는 저 같은 사람들에게 도움이 될 것 같습니다.

일단 저는 이벤트 캡쳐링과 버블링에 대해서 대충만 이해하고 있었습니다.

이렇게 말이죠.

이벤트가 맨 처음 상위에서 전파될 때의 순간을 의미합니다.

이벤트가 하위에서 상위로 전파될 때의 순간을 의미합니다.

이 정도는 프론트엔드를 사랑하는 분이라면 사실 알 거라 생각합니다.

그렇지만, 저는 이를 실제로 제대로 응용하지 못했습니다.

왜냐구요? 다음 질문에 제대로 답할 수 없었기 때문입니다.

💡

그렇다면, onClick은 어느 시점에 호출이 되는가?

직접 몇 차례 삽질을 한 끝에 알았습니다.

본래 onClick은 버블링 시점에 된다는 것을 말이죠.

따라서 상위 컴포넌트 → 하위 컴포넌트를 클릭한다면, 다음과 같은 현상이 발생합니다.

캡쳐링 → 타겟 → 버블링 = 하위 컴포넌트 먼처 실행, 상위 컴포넌트 이후 실행.

그런데, 만약 상위 컴포넌트에서 먼저 실행하고자 할 때에는 어떻게 해야 할까요?

이는 바로 onClickCapture을 사용하면 됩니다.

즉, 캡쳐링을 먼저 하기 때문에 그 시점에 이벤트를 호출하도록 하면, capturing한 상위 컴포넌트가 먼저 동작합니다. 즉, 캡쳐링 (상위) ⇒ 타겟 ⇒ 버블링 (하위)로 동작하는 것입니다.

현재의 경우, 하위 컴포넌트인 좋아요 버튼의 이벤트만 눌려지도록 하고 싶었습니다.

따라서, 현재의 이벤트 전파 순서가 하위 → 상위 컴포넌트로 진행되므로 이벤트 전파만 막는다면, 해결할 수 있습니다.

따라서, 가장 밑단의 컴포넌트에서 e.stopPropagation을 호출했습니다.

결국, 이벤트 전파 방식으로 사고한 결과, 문제를 해결할 수 있었을까요?

문제를 잘 해결했군요!

푸름햄의 이벤트 위임을 곱씹어 생각하며.