이벤트 델리게이션 알아보기

이벤트 델리게이션이란?

이벤트 델리게이션(Event Delegation)은 특정 요소의 모든 자식에 개별 이벤트 리스너를 추가하는 대신, 상위 요소에 단 하나의 이벤트 리스너를 추가하는 기법이다.

상위 요소에서 발생한 이벤트는 하위 요소까지 전파되는 이벤트 버블링을 활용하여 작동하는데 이번 내용에서는 델리게이션 기법을 사용하여 어떻게 코드를 구성하는지, 왜 사용하는지 알아보려고 한다.

 

기본 동작 원리

이벤트 델리게이션의 기본 원리는 DOM 이벤트가 버블링(bubbling) 되는 방식을 활용하는 것이다.

 

이벤트 버블링(Event Bubbling)

이벤트 버블링은 특정 DOM 요소에서 이벤트가 발생했을 때, 해당 이벤트가 상위의 요소로 전파되는 현상을 의미한다. 이 현상은 최상위 요소(대게 document 객체)까지 계속되며, 이 동안 각 상위 요소에 연결된 이벤트 핸들러들이 호출된다.

 

동작 방식

1. 이벤트 버블링 활용: 이벤트 델리게이션은 이벤트 버블링의 원리를 기반으로 하는데, 특정 DOM 요소에서 발생한 이벤트는 해당 요소의 상위 요소로 전파된다. 따라서, 하위 요소에서 발생한 이벤트를 상위 요소에서 감지하고 처리할 수 있게 된다.
2. 상위 요소에서 이벤트 감지: 상위 요소(일반적으로 컨테이너나 리스트 등)에 이벤트 리스너를 단 하나만 하고, 해당 리스너가 하위 요소에서 발생한 이벤트를 감지하고 처리한다.
3. 이벤트 대상 확인: 이벤트가 발생할 때마다 리스너는 event.target을 사용하여 실제로 이벤트가 발생한 요소를 확인한다. 만약 이벤트가 발생한 요소가 우리가 원하는 대상이라면, 해당 요소에 대한 작업을 실행한다.

 

예제

import React from 'react';

const ButtonComponent = ({ onClick, label }) => {
  return <button onClick={onClick}>{label}</button>;
};

const BoxComponent = () => {
  const handleButtonClick = (event) => {
    alert(`${event.target.textContent} was clicked!`);
  };

  return (
    <div>
      <ButtonComponent onClick={handleButtonClick} label="Button 1" />
      <ButtonComponent onClick={handleButtonClick} label="Button 2" />
      <ButtonComponent onClick={handleButtonClick} label="Button 3" />
    </div>
  );
};

export default ParentComponent;

 

위 코드와 같이 재사용이 가능한 버튼 컴포넌트에 click event가 발생될 때 실행하는 함수를 부모 컴포넌트에서 처리해주어 버튼 컴포넌트를 독립적으로 사용할 수 있고 해당 버튼들에 대한 이벤트를 부모에서 처리하기 때문에 메모리 사용량을 줄일 수 있다.

 

장점

1. 메모리 효율성: 많은 수의 동일한 이벤트 리스너를 추가하는 대신, 상위 요소에 하나의 리스너만 추가하면 되며, 이는 메모리 사용량을 줄이고 성능을 향상시키는 효과가 있다.
2. 동적인 요소에 유리: AJAX, React 등을 사용하여 동적으로 요소를 추가/제거하는 경우, 이벤트 리스너를 지속적으로 추가/제거할 필요가 없는데, 이는 이미 상위 요소에 리스너가 있기 때문이다.
3. 코드 간결성: 모든 개별 요소에 이벤트 리스너를 추가하는 대신 상위 요소에 하나만 추가하면 되므로 코드가 더 간결해진다.