React Event Delegation 에 대해
이벤트 위임은 다수의 자식 요소를 가지고 있는 상태에서 각 자식 요소에 각자의 이벤트 핸들러를 바인딩하는 대신 공통의 부모 요소에 하나의 이벤트 핸들러를 바인딩함으로써 성능과 메모리 사용성을 개선하는 패턴을 말한다.
Event 전파 과정 버블링, 캡처링
Event 는 버블링 단계를 통해 자식 요소에서 부모 요소에게까지 전파된다.
어떤 방법으로 특정 자식 요소를 식별할 수만 있다고 하면 해당 요소 핸들링을 부모 요소에 바인딩된 이벤트 핸들러 하나로 한번에 처리할 수 있게 된다.
특정 자식 요소 식별하는 방법
해당 Element 의 closet, matchs, dataset 과 같은 DOM API 를 활용할 수 있다.
target 의 closet( 특정 selector 를 만족하는 가장 가까운 부모요소 ) 메소드를 통해 자식 요소가 특정 요소의 자식 요소인지 판별 하거나 matches 를 이용해 특정 selector 를 만족하는 요소인지 판별할 수 있다.
dataset 을 이용해 하위 요소 자체에 심어둔 데이터로도 판별을 할 수 있을 것이다.
React 에서 이벤트 위임을 처리하는 법?
⚠︎ 주의 - React 에서는 애초에 모든 이벤트가 위임 처리되고 있다.
In React 17, React will no longer attach event handlers at the document level. Instead, it will attach them to the root DOM container into which your React tree is rendered: — React Blog.
그러므로 컴포넌트 단에서 우리가 붙여주는 이벤트 핸들러들이 실제 DOM 에 commit 된 DOM 노드에 실제로 붙여지는 게 아닌 document 레벨에서 모든 이벤트를 처리하고 있다...!
따라서, ref 를 통해 DOM 하나에 접근해 이벤트 위임을 처리하더라도 사실상 그냥 쓰는 것보다 이점이 없다.
디테일을 챙겨보자.
- React는 기존 이벤트를 포함한 SyntheticEvent 객체를 사용한다.
- React는 root Node에 모든 이벤트 핸들러를 연결시켜 이벤트 위임으로 이벤트를 처리한다.
- 이벤트가 트리거 되면 Fiber Tree를 따라서 위로 올라가면서 같은 이벤트 핸들러를 트리거 시키면서 DispatchQueue에 추가한다.
- root 에 도착하고 나면, DispatchQueue를 반복문으로 순회하면서 캡쳐링 또는 버블링 여부에 따라 순서대로 이벤트를 실행시킨다.
event.target 과 event.currentTarget 의 차이?
event.currentTarget은 이벤트 핸들러가 부착된 요소를 반환
event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 (자식)요소를 반환
