프론트엔드 성능 최적화를 위한 ‘이벤트 위임’ 전략

효빈2025년 8월 6일About 1 min

프론트엔드 성능 최적화를 위한 ‘이벤트 위임’ 전략 관련

프론트엔드 개발을 하다 보면 마크업이 점점 복잡해지고, 사용자 인터랙션이 늘어남에 따라 이벤트 핸들러도 함께 늘어나는 현상을 자주 겪게 됩니다. 특히 대규모 UI를 다루거나, 반복되는 DOM 구조를 포함하는 웹 애플리케이션에서는 버튼 수십 개, 리스트 수백 개에 이벤트를 각각 등록해야 할지도 모릅니다. 이처럼 이벤트 리스너가 많아지면 단순히 메모리 소비가 늘어나는 것을 넘어, 렌더링 성능 저하, 유지보수의 어려움으로 이어질 수 있습니다. 이때 이벤트 위임은 이벤트 버블링 특성을 활용하여, 효율적으로 이벤트를 처리하는 방식입니다.

이 문제를 해결할 수 있는 대표적인 패턴이 바로 이벤트 위임(Event Delegation)입니다.

이벤트 위임은 이벤트 버블링 특성을 활용하여, 여러 개의 하위 요소 각각에 이벤트를 등록하는 대신 상위 요소 하나에만 리스너를 걸어 효율적으로 이벤트를 처리하는 방식입니다.

이번 글에서는 이벤트 위임이 어떻게 동작하는지, 실제로는 어떤 장점을 제공하는지, 그리고 언제 위임을 쓰고 언제 직접 등록하는 것이 더 나은지에 대해 실무적인 관점에서 구체적인 예시와 함께 알아보겠습니다.

이벤트 위임이란?

이벤트 위임은 이벤트 처리를 ‘위임한다’라는 개념으로, 자식 요소가 아닌 공통 부모 요소에 이벤트 핸들러를 등록해, 하위 요소의 이벤트까지 처리하는 방식입니다. 반복되는 구조나 동적으로 생성되는 요소가 많을 때 특히 유용하며, DOM 이벤트의 버블링 덕분에 가능한 전략입니다.

1. 상위 요소에 이벤트를 등록해 하위 요소를 처리하는 방식

예를 들어, <ul> 태그 안에 수십 개의 <li> 항목이 있다고 해봅시다.

각 <li>에 일일이 클릭 이벤트를 붙이는 대신, 상위 요소인 <ul>에 단 하나의 이벤트 핸들러만 등록하고, 클릭 된 대상이 어떤 <li>인지 판단하여, 적절한 동작을 수행하도록 만드는 방식이죠.

const ul = document.querySelector("ul");

ul.addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    console.log(`클릭된 항목: ${e.target.textContent}`);
  }
});

여기서 e.target.tagName은 대문자로 반환되기 때문에 “LI”와 비교합니다. 소문자 “li”로 비교하면 조건이 항상 false가 되기 때문에 주의해야 합니다.

조금 더 실전적인 예시로, 쇼핑몰 상품 목록에서 .delete-button 클래스가 있는 삭제 버튼을 처리해 보겠습니다.

document.querySelector('#product-list').addEventListener('click', (e) => {
  if (e.target.matches('.delete-button')) {
    console.log('삭제됨');
  }
});

이 코드에서는 .delete-button 클래스를 가진 버튼을 클릭했을 때만 이벤트가 동작하도록 e.target.matches()를 사용합니다. 이렇게 하면 상위 요소인 #product-list에 이벤트를 한 번만 등록해도, 하위에 있는 수많은 삭제 버튼들을 한 번에 제어할 수 있습니다.

2. 이벤트 버블링이란?

이벤트 위임의 기반이 되는 개념이 바로 이벤트 버블링입니다. 이벤트 버블링(Event Bubbling)은 DOM 요소에서 이벤트가 발생했을 때, 해당 이벤트가 DOM 트리를 따라 상위 요소로 순차적으로 전파되는 현상을 말합니다.

예를 들어, 안의 요소를 클릭하면 클릭 이벤트는 li 요소에서 발생한 뒤, ul, body, html, document 순으로 전달됩니다. 이 구조 덕분에 하위 요소에서 발생한 이벤트를 상위 요소에서도 감지할 수 있는데요. 이것이 바로 이벤트 위임이 가능해지는 이유입니다. 아래와 같은 HTML 구조를 예로 들어볼게요.

<ul id="menu">
  <li class="item">홈</li>
  <li class="item">소개</li>
  <li class="item">문의</li>
</ul>

이 리스트에서 각각의 <li class=”item”>에 개별 이벤트를 등록하는 대신, 다음과 같이 <ul id=”menu”> 하나에만 이벤트를 등록할 수 있습니다.

document.getElementById('menu').addEventListener('click', (e) => {
  const li = e.target.closest('.item');
  if (li) {
    console.log(`클릭한 항목: ${li.textContent}`);
  }
});

이벤트는 실제로는 <li> 요소에서 발생했지만, 이 이벤트가 부모인 <ul>까지 전파되기 때문에 <ul>에서 감지하고 처리할 수 있습니다. closest() 메서드는 이벤트가 발생한 위치에서 가장 가까운 .item 클래스를 가진 상위 요소를 찾는 데 사용됩니다. 이러한 방식은 코드의 간결성과 유지보수성을 높이는 데 큰 도움이 되죠.

이벤트 위임의 장점

또한 이벤트 위임은 단순히 이벤트 등록 수를 줄이는 기술이 아닙니다. 성능, 유지보수, 확장성 측면에서도 다양한 이점을 제공합니다.

1. 반복 구조에서 핸들러 수 대폭 감소

이벤트 위임의 가장 큰 강점 중 하나는 바로 이벤트 핸들러의 수를 대폭 줄일 수 있다는 점입니다. 반복되는 UI 구조에서 각 요소마다 일일이 핸들러를 붙이는 방식은 브라우저 메모리에 부담을 줄 수 있고, 코드도 불필요하게 길어지기 마련입니다. 이와 달리 이벤트 위임을 활용하면 수십, 수백 개의 요소도 단 한 줄의 핸들러로 통합해서 관리할 수 있습니다.

예를 들어, 댓글 목록이나 쇼핑몰의 상품 카드처럼 수많은 항목이 반복되는 UI에서는 각 요소에 핸들러를 붙이는 것보다, 상위 컨테이너에 하나의 핸들러를 등록하는 편이 훨씬 효율적입니다.

2. 동적으로 생성된 요소에서도 자동 적용

또 다른 장점은 동적으로 생성되는 요소에도 별도의 핸들러를 붙이지 않아도 자동으로 동작한다는 점입니다. 다음 예제를 보시면 이해하기 쉬울 겁니다.

document.getElementById('todo-list').addEventListener('click', (e) => {
  if (e.target.matches('.todo-delete')) {
    e.target.parentElement.remove();
  }
});

const newItem = document.createElement('li');
newItem.innerHTML = '새 할 일 <button class="todo-delete">삭제</button>';
document.getElementById('todo-list').appendChild(newItem);

이 코드는 기존에 등록된 핸들러로 새로 추가된 .todo-delete 버튼까지 제어할 수 있습니다. appendChild로 새롭게 생성된 요소에는 개별 이벤트를 등록하지 않았지만, 상위 요소에 등록된 이벤트 핸들러가 정상적으로 동작하는 것을 볼 수 있습니다. 이처럼 동적 UI에서 이벤트 위임은 유지보수와 성능 측면에서 매우 유리한 전략입니다.

프론트엔드 성능 최적화를 위한 ‘이벤트 위임’ 전략

프론트엔드 성능 최적화를 위한 ‘이벤트 위임’ 전략

프론트엔드 성능 최적화를 위한 ‘이벤트 위임’ 전략 관련

이벤트 위임이란?

1. 상위 요소에 이벤트를 등록해 하위 요소를 처리하는 방식

2. 이벤트 버블링이란?

이벤트 위임의 장점

1. 반복 구조에서 핸들러 수 대폭 감소

2. 동적으로 생성된 요소에서도 자동 적용

언제 이벤트 위임을 쓰고, 언제 직접 등록할까?

1. 반복되는 구조에서는 이벤트 위임

2) 단일 또는 중요한 인터랙션은 직접 등록

3) 버블링이 중단되는 구조에서는 위임이 어려움

마치며