📆 22.10.19 - 이벤트 버블링 막기

버들·2022년 10월 19일

JavaScript React TIL 이벤트 이벤트 버블링 이벤트 캡쳐링

✨Today I Learn (TIL)

목록 보기

11/62

UI 컴포넌트를 그리는 과정에서 클릭 이벤트가 있는 A라는 컴포넌트 위에 B라는 컴포넌트를 올리고, 해당 B라는 컴포넌트를 작동시켰을 때, A 이벤트도 작용이 되는 것을 본 적이 있을 것이다.
원하는 이벤트만 작동하고 싶다면? 이벤트 버블링 에 대하여 꼭 짚고 넘어가야한다.

이벤트 버블링 (Event Bubbling)

이벤트 버블링이란 특정 화면 요소에서 이벤트 발생 시 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 즉, 최상단의 부모 요소를 만날 때 까지 반복되면서 핸들러가 동작되는 현상을 의미한다. 하단의 이미지를 보면 조금 더 이해가 쉽다.

코드로 작성하면 이러하다.

<body>
	<div class="adult">
		<div class="child">
			<div class="baby">
			</div>
		</div>
	</div>
</body>

상단의 adult div 값 하단으로 child, baby 가 있다. 그리고 clickEvent를 통하여
해당 UI의 컴포넌트를 클릭하면 같이 종속되어있는 div 세트 내에서 최하위 요소부터 부모요소까지 이벤트가 전달되며 차층 실행된다.

위의 이미지는 프로젝트에서 만들었던 캠핑장 정보 조회 서비스의 결과 컴포넌트인데, 캠핑장사진을 누르게 되면, 해당 캠핑장 상세정보를 볼 수 있는 페이지에 접근할 수 있게되는 구조로 되어있다. 그런데 이 컴포넌트를 크게 감싸고 있는 div값 내에 해당 사진과 그리고, 북마크 컴포넌트까지 하위 요소로 구성되어있다. 그래서 북마크만 작동을 시키고 싶어도, 상위의 사진을 누르게 되는 이벤트까지 적용되어버리게 되는데, 이것을 이벤트 버블링의 예라고 말할 수 있다.

그렇다면 어떻게 해결해야되는가..!

stopPropagation

 <CampImgBox>
          <BookmarkBorderIcon
            onClick={(e) => {
              e.stopPropagation();
              unpick(camp.campId);
            }}
          >
            <img
              src="/images/picked2.svg"
              alt="Bookmarked"
              style={{ width: "36px", height: "36px" }}
            />
          </BookmarkBorderIcon>
        </CampImgBox>

이 코드는 위의 북마크 컴포넌트의 일부분을 발췌한 것이다. (React 로 만들었습니다. 참고바래요)
onClick이라는 클릭이벤트에 작용해야되는 함수 위에 이벤트 객체를 파라미터로 받고 e.stopPropagation() 이 쓰여있는 것을 확인할 수 있게되는데, 이 stopPropagation으로 상위 요소에 이벤트를 전달하는 버블링을 억제할 수 있게 된다.

그러므로 이벤트 버블링이 우려되는 컴포넌트가 있다..? 그렇다면 이 stopPropagation 을 꼭 사용해보자.

만약 이벤트 버블링 뿐만 아니라 해당 요소에 할당된 다른 핸들러들의 동작을 모두 막으려면 stopImmediatePropagation() 을 사용해보자. 그렇게 하면 요소에 할당된 특정 이벤트를 처리하는 핸들러들이 모두 EMP를 맞은 듯, 동작을 하지 않게 된다.

이벤트 캡처링 (Event Capturing)

이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식을 이벤트 캡처링이라고 한다. 버블링에 비해선 적용되는 사례가 굉장히 적다. 하지만 캡처링이 우려된다면 removeEventListner로 핸들러를 직접 제거하는 방법이 있다.

버들

태어난 김에 많은 경험을 하려고 아등바등 애쓰는 프론트엔드 개발자

이전 포스트

📆 22.10.17 - Axios, Promise 비동기, Optional Chaining

다음 포스트