이벤트 버블링, 막을 수 있다는데? 근데 막는게 꼭 좋은걸까?

 이벤트 버블링, 리액트를 사용하다보면 클릭이 여러번 되는 경우가 있다.

이럴 때 이벤트 버블링 현상을 의심해볼 수 있는데, 이 개념을 모르면 에러를 해결하기 어렵다.

 

이벤트 버블링

버블링 현상을 간단하게 표현하면, 특정 태그나 요소에 이벤트가 발생하면 상위 요소인 부모 태그에 이벤트가 전달되는 것을 말한다. 

 

 

이벤트 버블링 현상 예시

아래 코드를 보면 Box라는 div 아래 span, 그 아래로 button이 있는 계층 구조다.

여기서 button을 누르면 +1이 될 것이라는 예상과 다르게 321의 결과가 나온다.

 

button을 누르는 순간 이벤트 버블링 현상으로 부모 요소인 span과 div의 onClick 이벤트가 모두 작동하기 때문이다.

이 버블링 현상은 자식에서 부모로만 전파되며 그 반대 현상인 상위 요소에서 하위 요소로 전파되는 것을 캡처링이라고한다.

 

 

버블링 막기

버블링 현상으로 원하는 이벤트를 얻지 못하거나 에러가 발생한다면 다음과 같은 방법을 사용하면 된다.

 

1. event.stopPropagation

  const onClickButton = (event) => {
    setValue((prev) => prev + 1);
    event.stopPropagation();
  };

이벤트를 받아서 stopPropagation 메서드를 사용하면 된다. 이벤트를 강제로 막는 것이기 때문에 상황에 따라 잘 고려하여 사용해야 한다고 한다.

 

2. event.currentTarget

만약 event.target을 불러오는 경우라면 currentTarget을 사용하면 간단하게 이벤트 버블링을 막을 수 있다.

  const onClickBtn = (event) => {
    alert(event.currentTarget.id);
  };

 

이벤트 버블링, 무조건 막는게 유리할까?

아 물론 개발에서 무조건이라는 건 없으니까 질문을 바꿔서, "이벤트 버블링 막아두는 편이 좋은 걸까?". 우선 전직 마케터로써 이벤트를 막는 다는 그 단어로부터 뭔지모를 불안감을 느꼈다. 그럼 유저 이동 경로는 어떻게 파악하지? 구글 애널리틱스 이벤트의 추적이 원활 할까? 의심이 드는 것이다. 관련 정보를 찾아보니 몇몇 데이터 분석 시스템은 이벤트 전체를 가져와서 분석하기 때문에 버블링을 막는다면 추적이 원활하지 않을 수 있다고 한다.

 

반대로 이벤트 버블링이나 캡처링을 이용하는 경우도 많다. 부모 자식 관계의 모든 버튼에 동일한 기능을 동작을 적용시키고 싶을 때, 각 요소마다 기능을 추가해야하는 것을 버블링을 일으키면 한줄의 짧은 코드로도 구현할 수 있다. 이벤트 위임이라는 개념인데 반복되는 태그 이벤트가 있다면 이 개념을 적용해보는 것이 좋다.