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

dev-mish-mash·2020년 10월 18일
1

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

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

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

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

    profile
    Junior Front-End developer

    0개의 댓글