[JavaScript] 이벤트 위임(Event Delegation)으로 동적 리스트 관리하기

JavaScript

[JavaScript] 이벤트 위임(Event Delegation)으로 동적 리스트 관리하기

teamnova 2024. 11. 22. 22:20

728x90

안녕하세요.

오늘은 이벤트 위임을 활용한 동적 리스트 관리를 단계적으로 구현해 보겠습니다.

1. 이벤트 위임과 동적 리스트 관리란?

이벤트 위임이란?

이벤트 위임은 부모 요소가 자식 요소의 이벤트를 대신 처리하는 방법입니다. 이 방식은 DOM 요소가 동적으로 추가되거나 삭제되는 경우에 특히 유용합니다. 예를 들어, 리스트에 새로운 아이템을 추가하거나 삭제할 때 이벤트 위임을 활용하면 코드가 훨씬 간결해지고 효율적이 됩니다.

왜 필요한가?

효율성: 동적으로 생성된 요소에도 추가 작업 없이 이벤트를 적용할 수 있습니다.
유지보수성: 이벤트 리스너를 여러 요소에 개별적으로 추가하지 않아도 됩니다.

2. 준비물: HTML 구조

먼저 기본적인 HTML 구조를 작성해 봅시다. 이 구조는 동적 리스트를 만들고 관리하기 위한 뼈대 역할을 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>동적 리스트 관리</title>
</head>
<body>
  <!-- 버튼과 리스트 -->
  <button id="addItem">아이템 추가</button>
  <ul id="list">
    <!-- 리스트 항목은 JavaScript로 동적으로 추가됩니다 -->
  </ul>
  <!-- JavaScript 파일 연결 -->
  <script src="script.js"></script>
</body>
</html>

구조 설명:

button: 클릭하면 새로운 리스트 아이템을 추가할 버튼입니다.
ul: 리스트 컨테이너로, 새로운 항목이 추가되는 위치입니다.
script.js: JavaScript 코드를 작성할 파일입니다.

HTML 파일을 저장했다면, 이제 script.js 파일을 만들어 JavaScript 코드를 작성해 보겠습니다.

3. JavaScript 구현

1) 요소 선택하기

먼저 HTML 요소를 JavaScript에서 선택합니다. 이 부분은 DOM 요소를 조작하기 위한 기본 단계입니다.

// 주요 DOM 요소 선택
const list = document.getElementById("list"); // 리스트 컨테이너
const addButton = document.getElementById("addItem"); // 아이템 추가 버튼

document.getElementById: 특정 ID를 가진 요소를 선택합니다.
변수 이름을 직관적으로 지어야 나중에 코드를 읽기 쉬워집니다.

2) 아이템 추가 기능

버튼을 클릭하면 새로운 리스트 아이템이 추가되도록 코드를 작성합니다.

// 아이템 추가 버튼 클릭 이벤트
addButton.addEventListener("click", () => {
  const newItem = document.createElement("li"); // 새로운 리스트 아이템 생성
  newItem.textContent = `아이템 ${list.children.length + 1}`; // 텍스트 추가
  newItem.classList.add("item"); // 클래스 추가 (스타일 적용 가능)
  list.appendChild(newItem); // 리스트에 추가
});

작동 원리:

createElement: 새로운 <li> 요소를 만듭니다.
textContent: 리스트 아이템에 텍스트를 추가합니다.
appendChild: 생성한 요소를 리스트에 추가합니다.

3) 아이템 삭제 기능 (이벤트 위임)

리스트를 클릭하면 해당 아이템이 삭제되도록 이벤트 위임을 활용합니다.

// 리스트 컨테이너에 클릭 이벤트 위임
list.addEventListener("click", (e) => {
  if (e.target.tagName === "LI") { // 클릭된 요소가 <li>인지 확인
    e.target.remove(); // 클릭된 아이템 삭제
    console.log("아이템이 삭제되었습니다.");
  }
});

작동 원리:

e.target: 이벤트가 발생한 실제 요소를 가져옵니다.
tagName: 클릭된 요소의 태그 이름을 확인합니다.
remove: 선택된 요소를 삭제합니다.

4. 완성된 코드

최종적으로 작성된 코드를 한 번에 정리하면 다음과 같습니다:

// DOM 요소 선택
const list = document.getElementById("list");
const addButton = document.getElementById("addItem");

// 아이템 추가 기능
addButton.addEventListener("click", () => {
  const newItem = document.createElement("li");
  newItem.textContent = `아이템 ${list.children.length + 1}`;
  newItem.classList.add("item");
  list.appendChild(newItem);
});

// 아이템 삭제 기능 (이벤트 위임)
list.addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    e.target.remove();
    console.log("아이템이 삭제되었습니다.");
  }
});