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

- React가 이벤트를 처리하는 방식을 이해해야 브라우저 DOM 이벤트의 버블링/캡처링을 적절히 사용할 수 있습니다. --- 우리가 브라우저와 상호작용을 하면 JavaScript 이벤트가 발생됩니다. 하지만 해당 엘리먼트에 직접 이벤트 리스너를 붙이면 생각했던 것과 다른 방식으로 이벤트 위임이 일어나곤 합니다. 이러한 문제는 React의 이벤트 버블링/캡처링 방식을 브라우저의 기본 이벤트 처리 방식과 혼용하기 때문에 주로 일어납니다. React에서 on 접두사가 붙은 이벤트 리스너는 합성 이벤트(Synthetic Event)를 받습니다. 이 합성 이벤트는 크로스 브라우징 이슈를 해결하기 위해 React 팀에서 이벤트를 한 번 래핑한 것인데요, React는 이 합성 이벤트를 해당 엘리먼트에서 리스닝하는 게 아니라, React 루트 요소에서 리스닝합니다. 본문에서는 대표적인 캐러셀 라이브러리 Swiper.js를 React에 적용하며 발생한 이벤트 버블링 문제를 분석하고 있습니다. 예제로 제시된 코드가 자세하고 친절하고, 쉽게 발생할 수 있는 문제를 다루기 때문에 읽어보시기를 추천드립니다.