React와 Swiper 병용 시 이벤트 전파 문제 해결법

React와 Swiper 같은 외부 라이브러리를 함께 사용할 때, 하위 요소의 stopPropagation이 상위 요소의 이벤트 핸들러를 막지 못하는 현상이 발생할 수 있다. 이는 React가 이벤트 리스너를 실제 DOM 요소가 아닌 React 루트 요소에 위임하여 등록하기 때문이다.

이벤트 전파 순서의 차이

Swiper는 내부적으로 브라우저의 touchend 이벤트를 감지해 자체 click 이벤트를 발생시킨다. 개발자가 Swiper 요소에 직접 addEventListener로 click 핸들러를 등록하면, 이 리스너는 실제 DOM 트리의 해당 요소에 붙는다. 반면 React의 onClick은 React 루트에 등록된다.

버블링 단계에서 이벤트는 실제 DOM 요소에서 React 루트 방향으로 전파된다. 따라서 Swiper 요소에 직접 붙은 리스너가 먼저 실행된 후, React 루트에 붙은 버튼의 리스너가 실행된다. 이 과정에서 버튼의 stopPropagation은 이미 실행된 Swiper의 핸들러를 되돌릴 수 없다.

해결 방안

1. 캡처 단계 사용: 캡처 단계에서 이벤트를 처리하면 순서를 바꿀 수 있으나, 복잡한 뷰 구조에서 예상치 못한 부작용을 초래할 수 있어 권장되지 않는다.
2. DOM 요소에 직접 리스너 등록: useRef와 useEffect를 이용해 렌더링된 버튼 요소에 직접 addEventListener를 등록한다. 이 경우 두 리스너 모두 실제 DOM 요소에 붙으므로 stopPropagation이 정상 작동한다.
3. React Element로 래핑: Swiper 컴포넌트를 감싸는 상위 div에 onClick을 추가한다. React의 이벤트 위임 구조를 활용하여 이벤트 전파를 자연스럽게 제어할 수 있어 유지보수 측면에서 가장 직관적인 방법이다.