React에서 이벤트 위임을 통한 이벤트 리스너 최적화

신호승·2020년 10월 18일
5

결론만 말하자면, 이벤트 위임을 통해서 이벤트 리스너의 개수를 줄이려 하더라도 의미 없고, 성능 향상도 없다.

성능 향상을 목적으로 하는 Native JS 에서의 이벤트 위임(Event Delegation)

  • DOM 객체가 매우 많을 경우 이벤트 리스너를 각 객체마다 부착하게 되면 메모리 누수와 성능 저하가 문제가 된다.
  • 따라서 이벤트 버블링을 응용하여 부모 엘리먼트에 리스너를 위임하여 부착하면, 리스너의 개수를 1개로 줄여 최적화할 수 있다.
  • 리액트에서의 이벤트 위임

  • 리액트에서는 자체 이벤트 시스템을 갖고 있어서, 이미 document 최상단에서 이벤트를 잡아 자체적으로 처리한다.(리액트 v16.0)
  • 참고: 리액트 v17.0에서, 이벤트 리스너를 document에 붙이는 것이 아니라 리액트가 관리하기 시작하는 div에 붙이는 것으로 바뀌었다.
  • 따라서 이벤트 위임을 통한 성능상의 이득은 없다고 봐도 무방하다. (이미 그렇게 되어 있으므로)
  • 각 돔 노드에 빈 이벤트 리스너가 달려있기는 하지만, iOS 와 사파리 브라우저를 호환하기 위한 대비책이라고 한다. (실제로 확인해보니 동작하지 않는 no-op 함수가 똑같이 바인딩되어 있다)
  • Reference

    Event delegation in React

    profile
    Front-End developer

    0개의 댓글