상황
React 로 개발하던 와중 문득 기존에 개발하던 방식에 의문이 생겼다.
이벤트를 처리할 때 각 요소에 일일이 등록해서 사용했던 점이었다. (아마도 react 를 배우고 개발하면서 봐온 일반적인 코드들의 형태들에 익숙해진 것 같음) 어째서 바닐라 js 로 개발할 때처럼 addEventListener 를 활용한다거나 이벤트 위임하는 방식으로 처리하지 않는지 찾아보게 됐다.
해결
찾아보니 github 에서 비슷한 질문과 답변이 있었다.
답변 중 일부: React doesn't attach your click event handlers to the nodes. It uses event delegation and listens at the document level. (React는 클릭 이벤트 핸들러를 노드에 연결하지 않습니다. 이벤트 위임을 사용하고 문서 수준에서 수신합니다.)
내가 이해한 바로는 실제 React 코드에서는 요소에 바로 이벤트를 연결하는 모양새지만 실제로는 상위 요소에서 이벤트를 위임해서 작동하는 방식이라는 것이다.
간단하게 보면 상위 수준에서 자동적으로 이벤트 위임해서 효율적으로 처리한다고 이해해도 충분 한 것 같다.
※ 버전이 올라가면서 document 에서 root 수준에서 처리되는 것으로 변경된다고 나와있지만 React 이벤트 처리방식을 이해하는 데 크게 중요하지 않은 것 같다.
추가적으로 배운 내용
SyntheticEvent 와 EventPool
React는 브라우저 간의 호환성 및 일관성 문제를 해결하고, 이벤트 핸들링을 보다 편리하게 만들기 위해 네이티브 이벤트를 래핑하여 SyntheticEvent 객체를 제공합니다.
SyntheticEvent 객체 특성상 새로운 이벤트가 발생할 때마다 추가적인 객체를 생성해 부담이 되므로 React 는 이러한 문제를 해결하기 위해 이벤트 풀링을 도입했습니다. 이벤트 객체를 풀(pool)에 저장하고, 이벤트 핸들러가 호출될 때 해당 이벤트 객체를 재사용해 메모리 사용을 최소화하고 가비지 컬렉션의 부하를 줄입니다.
참고
https://puki4416blog.netlify.app/how-to-react-event-handle/#event-pool
'React' 카테고리의 다른 글
| [React 18. 2] 공식 문서 훑으면서 몰랐던 부분 찾아보기 (0) | 2024.01.04 |
|---|---|
| React + Vite + ts 환경에서 path alias 설정하기 (0) | 2023.11.08 |
| React + ts 정적 파일 저장 위치와 기준 (0) | 2023.11.06 |
| 배열의 index 와 key 의 관계 (0) | 2023.02.28 |
| react 에서 inline style 의 단점 (0) | 2022.10.12 |
