오늘은 이벤트 버블링과 이벤트 캡쳐링에 대해서 설명하려고 한다.
단순히 개념에 대해서 공부를 하는거보다 이 개념이 필요한 상황이 발생했을 때 정리해보는 것이 가장 좋다.
상황은 제로초님 next 클론코딩을 하던 중 발생했다.
출처 : https://www.inflearn.com/course/next-react-query-sns%EC%84%9C%EB%B9%84%EC%8A%A4
위 이미지는 트위터 게시물중 하나이고, 글 자체를 클릭했을 때는
해당 글의 상세 페이지로 넘어가게 되고, Bold 처리된 이름을 클릭했을 땐 유저의 개인 페이지로 넘어가게 된다.
글은 onClick 이벤트로 처리해두었고, Elon Musk란 이름은 Link 태그로 경로를 가지고 있는 상태이다.
해당 article 을 가진 쪽이 부모이고, 해당 컴포넌트로 감싸 children을 통해 들어오는 Link태그를 가진 쪽이 자식이다.
간단하게 설명하면
<article onClick={`/${id}/status/${post.id}`}>
<Link href={`/${user.id}`}>Elon Musk</Link>
</article>이런 구조를 가지고 있다.
여기서 article을 클릭해서 글의 상세 페이지로 넘어가려했지만,
Link 태그를 클릭했을 때의 경로인 ${user.id} 로 넘어가게 되는 것이다.
왜 이런 상황이 발생할까?
결론부터 말하면 둘 다 이벤트 버블링 단계에서 발생하는 이벤트이기 때문에
해당 이벤트가 실행되는 시점이 충돌하기 때문이다.
이벤트 버블링
그렇다면 이벤트 버블링이 무엇일까?
이벤트 버블링은 위와 같이 자식 - 부모 둘 다 이벤트를 발생시킬 때,
자식 > 부모 순으로 이벤트가 발생해, 다음과 같은 상황에서 article을 클릭해도
자식의 이벤트가 먼저 반응하게 되는 것이다.
그럼 좀 더 들어가서 여기서 자식의 이벤트가 발생하고 난 뒤 부모의 이벤트는 무시되는 것일까?
이러한 테스트를 해보겠다.
지금 부모, 자식 둘 다 이벤트 버블링 단계에서 발생하는 이벤트이고
버블링 단계이니 자식 > 부모 순으로 이벤트가 발생할 것이다.
여기서 중요한 점은 test 라는 경로로 이동을 했을 때, 부모인 div가 가지고 있는 이벤트가 실행이 되는 것인가? 저 콘솔이 찍히냐 가 궁금한 점이다.
결과는 페이지 이동도 하고 부모의 이벤트까지 잘 동작하는것을 볼 수 있다.
추가적으로 브라우저가 이벤트를 동기적으로 처리한다는 점도 알 수 있었다.
자식 요소가 가진 이벤트 리스너가 실행되고 >
버블링되며, 부모 요소가 가진 이벤트가 실행된다 >
a 태그와 같은 요소의 기본 동작이 실행되고 페이지 이동을 하게 된다.
이런 구조의 테스트도 해보면,
자식 이벤트가 발생한 뒤 부모 이벤트가 일어나는 것을 알 수 있다.
이것으로 버블링에 동작은 확실히 이벤트가 자식에서 발생해서 부모로 전파됨을 알 수 있게 됐다.
다시 처음으로 돌아가서 이걸 어떻게 해결했는지를 알아보자.
이벤트 캡쳐링
이벤트 캡쳐링은 버블링과는 반대로 부모에서 자식 순으로 이벤트가 전파되는 것을 말한다.
버블링 단계에서 자식 이벤트와 충돌이 발생하기 때문에,
부모 이벤트를 캡쳐링으로 수정해주었다.
기존 onClick과 onCLickCapture는 이벤트가 처리되는 단계가
onClick 은 자식 > 부모로 이벤트 처리가 됐다면,
onClickCapture 은 부모 > 자식 순으로 자식이 어떠한 이벤트를 처리하기 전에 먼저 처리하게 된다는 차이가 있다.
<article onClick={`/${id}/status/${post.id}`}>
<Link href={`/${user.id}`}>Elon Musk</Link>
</article>그래서 다음과 같은 구조에서 자식이 가진 링크로 이동하는것이 아니라
onClick 함수가 가진 id/status/id 경로로 이동하게 되는 것이다.
좀 더 자세하게 캡쳐링이 어떻게 동작하게 되는지 확인해보자.
기본값인 버블링의 동작 순서
cc에서 이벤트가 발생했을 때, cc > bb > aa 순으로 이벤트가 전파된다.
캡쳐링의 동작
aa의 이벤트를 캡쳐링으로 바꿔둔 상태이고,
cc에서 이벤트가 발생했을 때의 동작 순서이다.
왜 다음과 같은 순서로 이벤트가 발생하는 것일까?
이벤트가 발생하게 되면 첫번째 단계인 캡쳐링에서 aa가 캡쳐링인것을 확인하게 된다.
캡쳐링은 부모 > 자식 순으로 이벤트가 발생하기 때문에, 여기서 aa의 이벤트가 실행하는 것이다.
그리고 cc까지 내려와서 이벤트 버블링이 시작되는 것이다.
캡쳐링 이벤트가 끝난 후 버블링 이벤트가 시작되므로 동작순서가 aa > cc > bb 가 되는 것이다.
추가적으로 여기서 bb의 이벤트를 캡쳐링으로 바꿔줬을 때 결과를 예상해보자
여전히 이벤트는 cc에서 발생하게 될 때, 동작 순서가 어떻게 될까?
다음과 같이 캡쳐링 단계의 이벤트가 발생한 후, 버블링인 cc가 실행되는 것을 볼 수 있다.
