왜 리액트에서는 이벤트 위임을 쓰지 않을까?
date
Feb 18, 2023
thumbnail
slug
왜 리액트에서는 이벤트 위임을 쓰지 않을까
author
status
Published
tags
Why
summary
리액트에서는 이미 이벤트 위임이 처리되고 있어서, 별도로 이벤트 위임을 구현할 필요가 없다. onClick과 같은 이벤트들이 실제 DOM에 붙여지는 것이 아니라 document에서 모든 이벤트를 처리하고 있다.
type
Post
updatedAt
Jul 15, 2023 07:28 AM
최근 바닐라 JS, DOM에 대해서 공부하다보니 문득 이런 생각이 들었다.HTML, JS로 만든 웹은 이벤트 핸들러를 줄이기 위해 이벤트 위임을 이용하는데 왜 리액트에서는 이 좋은 이벤트 위임을 사용하지 않을까?
찾아보니 어리석은 제 자신을 매우 치겠습니다.
이벤트 위임이란?
이벤트 위임은 캡쳐링, 버블링을 활용한 이벤트 핸들링 패턴인데 자식 요소에서 발생한 이벤트의 경우 버블링을 통해 부모요소에게 전달되므로 event.target으로 특정한 요소를 식별할 수 있다면 하나의 이벤트 핸들러로 작업을 처리할 수 있게 되는 것이다.
이렇게 좋은 이벤트 위임을 리액트 best practice 코드에서는 한번도 본적이 없다.검색해보니 이런 이슈를 찾을 수 있었다.
Dan Abramov가 답변을 해주셨는데
I think you might have misunderstood the answer.React doesn’t attach your click event handlers to the nodes.It uses event delegation and listens at the document level.
React의 경우 이벤트가 이미 이벤트 위임으로 처리되고 있었던 것이다.컴포넌트에서 onClick과 같은 이벤트들이 실제 DOM에 붙여지는 것이 아니라 document에서 모든 이벤트를 처리하고 있다.
ref로 DOM에 접근해서 이벤트 위임을 구현해도 장점은 없다.