프론트엔드 성능, 이벤트 위임으로 잡자!
by DD
11개월 전
조회수 2
이벤트 위임은 이벤트 버블링을 활용하여 여러 하위 요소의 이벤트를 상위 요소에서 처리하는 방식이다.
이벤트 핸들러 수 감소, 동적 요소 처리 용이, 유지보수성 향상 등의 장점을 제공한다.
submit, scroll 등 특정 이벤트는 직접 등록하고, stopPropagation() 사용 시 위임이 불가능하다.
이벤트 위임의 핵심 원리: 버블링
이벤트 위임은 이벤트 버블링의 특성을 활용하여, 하위 요소에서 발생한 이벤트를 상위 요소에서 처리한다. 구체적으로, 하위 요소 대신 상위 요소에 이벤트 리스너를 등록하여, 코드 중복을 줄이고 성능 개선을 달성한다. 따라서, DOM 구조를 효율적으로 관리하고 유지보수성을 높일 수 있다.
이벤트 위임 vs 직접 등록: 트레이드오프
이벤트 위임은 이벤트 핸들러 수 감소를 통해 성능을 향상시키지만, 모든 상황에 적합하지 않다. submit, scroll 이벤트는 직접 등록하여 예기치 않은 동작을 방지해야 한다. 반면, 반복적인 UI 요소에서는 이벤트 위임이 코드 간결성과 성능 최적화를 동시에 제공한다.
실전 적용 가이드: 성능 측정 및 주의사항
이벤트 위임 적용 후, 크롬 개발자 도구의 Performance, Memory 탭을 활용하여 성능을 측정해야 한다. 구체적으로, 이벤트 핸들러 수, 실행 시간, GC 상태를 주기적으로 점검한다. 따라서, 이벤트 위임의 효과를 정량적으로 파악하고, 성능 저하 요인을 사전에 방지할 수 있다.
