React 이벤트와 브라우저 이벤트

간단 소개

React Swiper 컴포넌트와 브라우저 이벤트 처리 시 발생할 수 있는 문제점과 해결 방안을 제시하고, 이벤트 위임 및 전파 과정을 설명합니다.

AI Summary

문제 상황: React Swiper 컴포넌트 내 버튼 클릭 시, 의도치 않게 Swiper의 onClick 이벤트가 함께 실행되어 슬라이드가 넘어가는 문제 발생.
- stopPropagation을 사용해도 문제가 해결되지 않음.
원인 분석: Swiper는 touchend 이벤트 기반으로 자체 click 이벤트를 발생시키므로, 브라우저의 click 이벤트 전파를 막는 것이 효과가 없음. React의 합성 이벤트 시스템은 이벤트 리스너를 루트 요소에 붙이므로, 이벤트 발생 순서가 예상과 다를 수 있음.
해결 방안:
- 1안 (캡처 단계 이벤트 리스너): 복잡성 증가 우려로 기각.
- 2안 (button 요소에 직접 이벤트 리스너): 요소 렌더링 시점 관리가 필요하며, 주석을 통해 이유를 명확히 해야 함.
- 3안 (상위 React Element에 onClick): 간단하고 직관적이며 유지보수에 용이. 최종적으로 3안을 선택하여 문제 해결.