SyntheticEvent of React

React에서 이벤트 핸들러를 조작하던 중에 이벤트를 콘솔에 찍어보고는 문득 의문이 들었다.

왜 React는 고유 이벤트를 발생시키지 않고 nativeEvent 객체를 포함한 합성 이벤트를 발생시킬까? 심지어, 원한다면 nativeEvent 객체를 포함하고 있기 때문에 네이티브 이벤트에 접근할 수 있다. 아무래도 React의 Virtual DOM과 관련이 있다는 생각이 들었고, 이에 대한 이유는 공식 문서와 스택 오버플로에서 찾을 수 있었다.

개요 이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 이벤트 래퍼 SyntheticEvent 객체를 전달받습니다. stopPropagation() 와 preventDefault()를 포함해서 인터페이스는 브라우저의 고유 이벤트와 같지만 모든 브라우저에서 동일하게 동작합니다. 지원하는 이벤트 React는 이벤트들을 다른 브라우저에서도 같은 속성을 가지도록 표준화합니다.

합성 이벤트(SyntheticEvent) - React

React는 Virtual DOM으로서 실제 DOM 위에 구축되고, 이벤트 처리를 포함하여모든 것이 추상화된 레이어에서 발생합니다. 그리고 이벤트는 자연적 환경에서 나타나므로 DOM 혹은 네이티브입니다. 따라서 먼저 이벤트를 Virtual DOM으로 가져와 변경 사항을 계산한 후 Virtual DOM의 컴포넌트에 전달하고 관련 변경 사항을 다시 DOM에 가져와 적절히 반영합니다. React는 문서 단계의 모든 이벤트를 수신하고, 변경 사항을 Virtual DOM에 전달하는 작업은 최상위 위임에 따라 효과적으로 수행됩니다. 그렇게 Virtual DOM에서 모든 변경 사항을 수행하게 되는데, 이는 실제 DOM에서 변경하는 것보다 빠릅니다. 또한, 합성 이벤트는 실제로 wrapper로서, 크로스 브라우징 호환성 문제를 줄이는 것을 목표로 합니다. 그리고 가비지 콜렉션 시간을 줄임으로써 태스크를 더 빠르게 하는 풀링을 도입할 수 있으며, 마지막으로 하나의 네이티브 이벤트가 여러 개의 합성 이벤트를 생성할 수 있으므로 기술적으로 새 이벤트를 쉽게 만들 수 있습니다.

Understanding React's Synthetic Event System

생각대로 React의 Virtual DOM을 통해 뷰를 최적화할 수 있는 이유 중 하나가 맞았다. 솔직히 Pug, 그러니까 HTML에 익숙한 내게 Vue를 잠깐 맛본 뒤로, React의 보다 어려운 문법 앞에서 러닝 커브가 낮지 않다고 느껴갔지만, 지쳐가던 와중에 등장 배경이나 리액트의 원리 같은 것을 보면서 파면 팔 수록, 배우면 배울수록 매력적인 게 React라는 생각이 든다. 단지 내가 노력이 부족했구나라는 생각과 함께..

원문: Medium