[JS] 이벤트 위임 - 1억개의 자녀요소를 한 번에 통제하기

event delegation

CSS에서 부모의 속성이 자녀에게 상속되는 것처럼, 부모의 요소에 특정 이벤트 핸들러를 할당했다면 그것이 자녀에도 그대로 적용되는 것을 이벤트 위임(event delegation)이라고 합니다.

 

event delegation의 활용

API를 통해 사용자의 친구 정보를 불러 온다고 가정해봅시다. 등록된 친구가 5명이라면 데이터 배열안에 다섯 사람 분량의 정보가 담겨 있을 것이고, 100명이라면 100명의 정보가 담겨있을 것입니다.

받아온 정보를 가지고 이름 정보의 <li> 태그들을 <ul> 태그안에 넣어주는 함수를 만들었습니다. 코드를 확인해볼까요?

 

 

 

 

사용자에 따라 1명의 친구 등록되어 있을 수도 있고 1억명의 친구가 등록되어 있을 수도 있겠죠. 1억명의 친구의 경우 1억명의 데이터를 받아오게 될 것입니다.

이제 <li> 요소들에 이름을 클릭하면 빨간색으로 색을 변경하는 간단한 이벤트를 등록해봅시다.

그런데, 코드를 짜려고 하니 두 가지 문제가 있습니다.

1. addEventListener 키워드를 통해 이벤트를 등록하려고 하는데 <ul> 태그 안에 있는 <li>들은 함수가 실행되기 전까지는 실재하지 않습니다.
2. 1억명의 친구가 있는 사용자의 경우, 모든 <li> 태그마다 onClick을 달아준다면, 원하는 이벤트를 구현가능하지만 onClick 이벤트 핸들러를 1억번 작성하게 되어 코드의 길이가 과도하게 길어집니다.

이벤트 위임을 이용한다면 이러한 문제를 간단히 해결할 수 있습니다. 자녀 요소들의 공통 조상인 부모 요소에 이벤트 핸들러를 할당하는 것이죠. 완성된 코드를 확인해봅시다. 

 

 

 

 ul.addEventListener('click', (e) => {event.target.style.color = 'red'})

 

단 한 줄의 코드로 모든 자녀요소들이 이벤트를 다룰 수 있게 되었습니다. 결과적으로 이벤트 위임을 통해 1억줄의 코드낭비를 막을 수 있었던 것이죠. 

이벤트 위임을 이해하고 코드에 적용한다면 더 읽기 쉽고 효율적인 코드를 작성할 수 있습니다.