🖋️ 델리게이션 패턴이란?

---

• React의 이벤트 위임

• 이벤트 버블링을 이용하여 개별 하위요소 마다가 아닌 상위요소에 단일 이벤트 적용하는 패턴

• 작동방식

  • 이벤트 버블링

    • DOM 의 요소에서 이벤트가 발생하면 명시적으로 이벤트 전파를 막지 않으면 상위 요소까지 버블링
    • 상위 요소에서 하위 요소의 트리거된 이벤트 포착 가능

  • 단일 이벤트 리스너

    • 상위 요소에 단일 이벤트 리스너를 배치
    • 해당 요소 안에 하위 요소에 대한 이벤트 관리 가능
    • 모든 하위 요소에 이벤트를 추가하는 것보다 효율적

  • 대상 요소 식별

    • target 속성을 통해 해당 요소를 식별
    • 해당 요소에 data-* 와 같은 속성을 사용하여 이벤트 핸들러에서 읽을 수 있게 설정

• 대표적인 예시 (리스트)

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn React' },
    { id: 2, text: 'Build a React App' },
    { id: 3, text: 'Explore Event Delegation' },
  ]);

  const handleTodoClick = (e) => {
    // Find the todo ID from the clicked button's data attribute
    const todoId = e.target.getAttribute('data-todo-id');
    console.log(`Todo with ID ${todoId} was clicked.`);
    // Implement further logic based on todoId (e.g., mark as completed, delete)
  };

  return (
    <ul onClick={handleTodoClick}>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text} <button data-todo-id={todo.id}>Complete</button>
        </li>
      ))}
    </ul>
  );
}

export default TodoList;

• 장점

  • 동적 항목 관리 단순화

    • ListItem이 추가되거나 제거될 때 이벤트 리스너를 연결하거나 분리할 필요가 없음
    • 목록의 단일 리스너가 모든 것을 처리

  • 성능

    • 많은 이벤트 리스너를 갖는 데 따른 오버헤드를 줄여줌
    • 이는 대규모 동적 목록에 특히 유용

  • 유지관리성

    • 이벤트 처리 로직을 중앙 집중화하여 코드베이스를 더 쉽게 유지 관리하고 업데이트

• WHEN

  • 목록과 동적으로 생성된 콘텐츠를 처리할 때 더 깔끔하고 효율적인 React 구성 요소 작성을 강조