프론트엔드
React 이벤트와 브라우저 이벤트
두줄요약
Swiper와 React 이벤트 위임 방식의 차이로 버튼 클릭 전파가 막히지 않는 원인을 분석했습니다.\n상위 React 래퍼에 클릭 핸들러를 두어 합성 이벤트 흐름으로 통일했습니다.
문제 상황
- Swiper 전체 클릭 시 다음 슬라이드로 이동하는 기능과 슬라이드 내부 버튼 기능의 클릭 충돌
- 버튼의
stopPropagation호출 후에도 Swiper 클릭 처리와 슬라이드 이동 발생
원인 분석
- Swiper React Components의
onClick이 브라우저click이 아닌 내부touchend기반 이벤트로 동작 - Swiper DOM 요소의 네이티브 이벤트 리스너가 React 루트에 위임된 합성 이벤트보다 먼저 버블 단계에서 실행
- React 버튼
onClick의 전파 중단 시점이 상위 Swiper 네이티브 리스너 실행 이후인 이벤트 순서
해결 방법
- 버튼 렌더링 요소에 네이티브
click리스너를 직접 등록해 상위 Swiper 리스너 전파 차단 - Swiper를 감싸는 상위 React 요소에
onClick을 등록해 React 합성 이벤트 체계로 통일 - 유지보수성과 직관성을 고려해 래퍼 React 요소를 추가하는 3안 선택
주의할 점
- React와 이벤트를 직접 처리하는 외부 라이브러리 조합에서 이벤트 종류와 리스너 등록 위치 확인
- 캡처 단계 활용은 복잡한 뷰 구조에서 예측하기 어려운 동작 가능성
- DOM 직접 이벤트 등록 시 등록 이유와 해제 로직 명시 필요
