- 리액트의 이벤트 시스템은 네이티브 이벤트 시스템이 아닌 자체적인 이벤트 시스템으로 구현되어 있습니다.
- 리액트에서 이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위해서 이벤트 래퍼 SyntheticEvent 객체를 전달 받습니다.
- 브라우저 고유의 이벤트가 필요하다면 nativeEvent 어트리뷰트를 참조합니다.
- 합성 이벤트는 브라우저 고유 이벤트에 직접 대응하지 않습니다.
- 리액트 고유의 이벤트(합성 이벤트)를 사용하는 이유는?
- 버츄얼 돔을 쉽게 다루기 위해서
- 리액트에서는 렌더링 할 때, 컴포넌트에 어떤 이벤트가 prop 으로 설정되어있는지 확인하고 prop으로 등록된 이벤트를 등록합니다.
- 이 때, 해당 엘리먼트가 아니라 rootElement 에 이벤트를 등록합니다. 즉 이벤트 위임을 사용합니다.
- 그리고 이벤트는 자체적으로 구축된 객체에 이벤트를 추가합니다.
- 이벤트 처리 로직은 기존의 이벤트 위임과 동일합니다.
- 상위 엘리먼트에서 이벤트를 받아 해당 이벤트가 발생해야하는 엘리먼트에 등록된 리스너를 호출합니다.
흐름을 간단하게 보자면 아래와 같습니다.
- 리스너에서는 네이티브 이벤트의 타겟 엘리먼트 기반으로 리액트 컴포넌트 객체를 찾습니다.
- 초기에 등록한 이벤트 플러그인에서 분석한 이벤트를 배치처리 작업으로 등록합니다.
- 이벤트 분석이 끝나면 이벤트를 실행합니다.
- 위에서 설명한 리액트 이벤트 객체를 통해 이벤트가 발생되면 바로 이벤트 연결을 해제합니다.