리액트 이벤트 위임에 대해 궁금합니다.

https://bityoungjae.medium.com/react%EC%9D%98-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%9C%84%EC%9E%84-b08f84e16250 찾아보니 아마 이 글을 보신것 같습니다. 저 글의 요지는, 리액트가 이미 자체적으로 이벤트 위임을 처리하고 있기 때문에, 사용자 코드에서 위임하는 패턴의 코드를 작성해도 이득을 볼 수 없다 라고 보이고요, 저도 사실로 알고 있습니다. 리액트는 root element에서 모든 이벤트를 받고(v17 주요 변경사항) 내부적으로 등록된(onChange 등) 리스너를 알맞게 호출해주는 메커니즘을 가지고 있는데요, 그래서 실제로 빌드된 리액트 페이지에서는 button의 onclick에 등록해놓은 리스너 등이 웹브라우저 디버거에서는 보이지 않습니다. DOMElement에 대해서 addEventListener와 같은 웹 표준 API로 리스너를 등록하지 않았기 때문이죠. Vue, Svelte에서는 이러한 위임 처리 없이 addEventListener를 통해 리스너를 실제 DOMElement에 붙여버리기 때문에 브라우저 디버거에서 확인할 수 있고, 이벤트 capturing->bubbling에 따른 비용이 프레임워크 최적화 없이 발생한다고 보시면 됩니다.

리액트에서는 이벤트 위임을 사용하지 않고 각각의 태그에 이벤트 핸들러를 직접 걸어주는 방식을 권장합니다. 이는 리액트의 Virtual DOM 이벤트 시스템이 이벤트 위임과 유사한 동작을 수행하기 때문입니다. Virtual DOM 이벤트 시스템에서는 이벤트가 발생하면 이벤트가 발생한 컴포넌트를 찾아서 해당 컴포넌트의 이벤트 핸들러를 호출합니다. 이 때 이벤트는 상위 컴포넌트로 버블링되어 올라가면서 이벤트 핸들러가 호출되는 구조입니다. 따라서 이벤트 위임을 사용하지 않고 각각의 태그에 이벤트 핸들러를 직접 걸어주면, 이벤트 발생 시 이벤트가 발생한 태그가 렌더링된 컴포넌트가 되어 이벤트 핸들러가 호출됩니다. 이러한 방식은 Virtual DOM 이벤트 시스템에서 이벤트 위임과 유사한 동작을 수행하기 때문에 메모리나 성능상의 이점이 없다고 이야기하는 것입니다. 따라서 리액트에서는 이벤트 위임보다는 각각의 태그에 이벤트 핸들러를 직접 걸어주는 방식을 권장합니다.