React의 이벤트 위임
이벤트 위임(Event Delegation)은 다수의 자식 요소를 가지고 있는 상태에서 각 자식 요소에 각자의 이벤트 핸들러를 바인딩하는 대신 공통의 부모 요소에 하나의 이벤트 핸들러를 바인딩함으로써 성능과 메모리 사용성을 개선하는 패턴을 말한다.
Event의 전파과정(이벤트는 캡처링 단계 -> 타겟 단계 -> 버블링 단계를 거쳐 전파된다) 중 버블링 단계를 활용한 트릭인데, 자손 요소에서 dispatch 된 Event의 경우 버블링 단계를 통해 부모 요소에게까지 전파가 되므로, 어떤 방법으로 특정 자손 요소를 식별할수만 있다면 자손 요소들에 대한 이벤트 핸들링을 부모 요소에 바인딩 된 이벤트 핸들러 하나로 한번에 처리할 수 있게되는 것이다.
특정 자손 요소를 식별하는데에는 Element의 closest나 matches 혹은 HTMLElement의 dataset 같은 DOM API를 활용할 수 있다.
target(실제로 event를 dispatch 한 요소)의 closest(특정 selector를 만족하는 가장 가까운 조상요소) 메소드를 이용해 이 자손 요소가 특정한 요소의 자손 요소인지 판별하거나(내가 식별하기 원하는 자손 요소가 또 다른 자손 요소를 가진 경우 target이 오염될 수 있기 때문이다) matches를 이용해 특정 selector를 만족하는 요소인지를 판별하거나 아예 dataset을 이용해 하위 요소 자체에 심어둔 데이터로 판별을 할 수 있을 것이다.
이벤트 위임이야 워낙 대중적인 패턴이어서 자세한 설명은 구글링을 통해 쉽게 찾아볼 수 있을 것이니 이하 생략하도록 하고..
사실 이 글을 끄적인 이유는 따로 있는데, 내가 그동안 몰랐던 사실을 하나 새롭게 알게 되었기 때문이다..
언젠가 React에서 이벤트 위임을 효과적으로 구현하려면 어떻게 해야되나 고민했던 적이 있다. 그리고 까맣게 잊어먹고 있다가 오늘 어떤 책에서 이벤트 위임에 대한 언급이 있길래 다시끔 그때 그런 고민을 했었다는 사실을 무심결에 떠올렸는데..
설레이는 마음에 구글링 하다가 react repo에서 아래의 이슈를 찾게 되었다.. (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의 경우 애초에 모든 이벤트가 이벤트 위임으로 처리되고 있었던 것이다. 그러니까 컴포넌트 단에서 우리가 on~로 붙여준 모든 이벤트 핸들러들이 실제 dom에 commit된 해당 dom 노드에 실제로 붙여지는게 아니고 document 레벨에서 모든 이벤트를 처리되고 있었던 것..!
따라서, 설사 ref를 통해 dom에 하나하나 접근해서 이벤트 위임을 어렵게 어렵게 구현하더라도 실상 그냥 쓰는 것 보다 이점이 없다는 사실..
막상 여기까지 써놓고 보니 나만 몰랐었던 이야기가 아닌가 싶기도 한데, 혹시 나같이 오해하고 있던 사람이 또 있을까봐 이 글을 남겨둔다.. ㅎㅎ
추가) 이걸 직접 테스트해본 용자도 있었다. 이 글을 보시는 분들께서도 참고하시라고 아래에 링크를 남겨둔다. 미리 스포일러 하자면 결론은 이 글과 동일하다는 것..!
