JavaScript - 이벤트 위임

안녕하세요, 야심勃勃한 프로그래머 여러분! 오늘 우리는 JavaScript에서 가장 강력하고 효율적인 기술 중 하나를 배울 것입니다: 이벤트 위임(Event Delegation). 프로그래밍 초보자라면 걱정 마세요; 저는 이 개념을 단계별로 안내해드릴 것입니다. 수년 동안 수많은 학생들을 가르친 경험을 바탕으로 말이죠. 그럼 커피 한 잔을 마시며(또는 좋아하는 음료를 마시며), 이 흥미로운 여정을 함께 시작해보겠습니다!

JavaScript - Event Delegation

이벤트 위임이란?

자, 구체적인 내용으로 들어가기 전에 이벤트 위임이 정확히 무엇인지 이해해보겠습니다. 큰 사무실의 매니저로 가정해보세요. 각 직원들에게 직접 작업을 할당하는 대신, 팀 리더들에게 책임을委譲하고, 그들이 작업을 분배하는 것을 상상해보세요. 이것이 바로 JavaScript에서 이벤트 위임이 하는 일입니다!

이벤트 위임은 부모 요소에 단일 이벤트 리스너를 연결하는 기술로, 각 자식 요소에 여러 이벤트 리스너를 연결하는 대신 사용됩니다. 이렇게 하면 코드가 더 효율적이 되고, 페이지 로드 시 존재하지 않는 요소들에 대한 이벤트를 처리할 수 있습니다!

이벤트 위임을 사용해야 하는 이유

이제 perhaps you're wondering, "Why should I bother with Event Delegation?" Well, let me share a little story from my early days of teaching. I once had a student who created a to-do list app. For each task, he added a separate event listener. By the time he had 100 tasks, his app was slower than a snail climbing a mountain! That's when I introduced him to Event Delegation, and voila! His app was running smooth as butter.

Here are some key benefits:

성능: 적은 이벤트 리스너 수는 메모리 사용량을 줄이고 페이지 로드 시간을 빠르게 합니다.
동적 요소: 초기 페이지 로드 후 추가된 DOM 요소들에도 작동합니다.
코드 간소화: 코드를 적게 작성하여 버그가 발생할 가능성을 줄입니다.

이벤트 위임의 단계

이제 '왜'를 이해했으므로 '어떻게' 하는지 살펴보겠습니다. 이벤트 위임은 세 가지 주요 단계로 이루어집니다:

1. 부모 요소 식별

먼저, 모니터링하고 싶은 모든 자식 요소를 포함하는 부모 요소를 선택해야 합니다.

2. 부모에 이벤트 리스너 연결

다음으로, 이 부모 요소에 이벤트 리스너를 연결합니다.

3. 이벤트를 트리거한 요소 확인

마지막으로, 이벤트가 발생했을 때 트리거한 특정 자식 요소를 확인하고 대응합니다.

이제 이 단계들을 코드 예제로 확인해보겠습니다!

이벤트 위임 예제

예제 1: 기본 이벤트 위임

간단한 과일 목록을 시작으로 보겠습니다:

<ul id="fruitList">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>

이제 각 <li>에 클릭 이벤트를 추가하는 대신 이벤트 위임을 사용하겠습니다:

document.getElementById('fruitList').addEventListener('click', function(e) {
if(e.target && e.target.nodeName == "LI") {
console.log("You clicked on " + e.target.textContent);
}
});

이 코드에서:

부모 <ul> 요소에 이벤트 리스너를 연결합니다.
클릭이 발생했을 때, 클릭된 요소(e.target)가 <li>인지 확인합니다.
<li>라면, 클릭된 <li>의 텍스트 내용을 로그합니다.

이렇게 하면 나중에 과일을 더 추가해도 이벤트 처리가 자동으로 작동합니다!

예제 2: 동적 요소 생성

이제 좀 더 흥미로운 예제로 넘어가겠습니다. 사용자가 새로운 항목을 추가할 수 있는 간단한 할 일 목록을 만들어보겠습니다:

<input type="text" id="newTodo">
<button id="addTodo">Add Todo</button>
<ul id="todoList"></ul>

이제 JavaScript 코드는 다음과 같습니다:

const todoList = document.getElementById('todoList');
const newTodo = document.getElementById('newTodo');
const addTodo = document.getElementById('addTodo');

addTodo.addEventListener('click', function() {
if(newTodo.value !== '') {
const li = document.createElement('li');
li.textContent = newTodo.value;
todoList.appendChild(li);
newTodo.value = '';
}
});

todoList.addEventListener('click', function(e) {
if(e.target && e.target.nodeName == "LI") {
e.target.classList.toggle('completed');
}
});

이 예제에서:

새로운 할 일 항목을 동적으로 추가할 수 있습니다.
이벤트 위임을 사용하여 모든 할 일 항목의 클릭을 처리합니다.
클릭한 할 일 항목에 'completed' 클래스를 토글합니다.

예제 3: 이벤트 위임을 통한 다양한 동작

할 일 목록을 한 단계 더 발전시켜보겠습니다. 각 할 일 항목에 수정하고 삭제할 수 있는 버튼을 추가합니다:

<ul id="advancedTodoList"></ul>

그리고 다음과 같은 향상된 JavaScript 코드를 작성합니다:

const advancedTodoList = document.getElementById('advancedTodoList');

// 새로운 할 일 항목 생성 함수
function createTodoItem(text) {
const li = document.createElement('li');
li.innerHTML = `
<span>${text}</span>
<button class="edit">Edit</button>
<button class="delete">Delete</button>
`;
advancedTodoList.appendChild(li);
}

// 전체 목록에 대한 이벤트 위임
advancedTodoList.addEventListener('click', function(e) {
const target = e.target;

if(target.className == 'delete') {
const li = target.parentNode;
advancedTodoList.removeChild(li);
} else if(target.className == 'edit') {
const span = target.previousElementSibling;
const newText = prompt("Edit your todo:", span.textContent);
if(newText !== null) {
span.textContent = newText;
}
}
});

// 몇 가지 초기 할 일 항목 추가
createTodoItem("Learn Event Delegation");
createTodoItem("Master JavaScript");

이 고급 예제에서:

부모 <ul> 요소에 단일 이벤트 리스너를 사용하여 수정 및 삭제 동작을 처리합니다.
클릭된 버튼의 클래스를 확인하여 동작을 결정합니다.
이 접근 방식은 할 일 항목이 많아도 효율적입니다.

결론

이제 여러분, 이벤트 위임의 땅을 여행한 것입니다. 기본 개념에서 고급 구현까지! 기억하시기 바랍니다, 강력한 도구인 이벤트 위임은 지혜롭게 사용할 때 가장 빛을 발합니다. 모든 상황에 최선의 해결책인 것은 아니지만, 여러 비슷한 자식 요소나 동적으로 생성된 콘텐츠를 처리할 때는 자주 사용할 수 있는 좋은 친구입니다.

프로그래밍 여정을 계속하면서 이 개념들을 계속 실험해보세요. 이벤트 위임을 다른 JavaScript 기능과 결합해보세요. 누가 알겠는가? 세상을 바꾸는 다음 큰 웹 애플리케이션을 만들 수도 있습니다!

다음 수업 때까지 행복하게 코딩하세요, 그리고 이벤트가 항상 원활하게 위임될 수 있기를 바랍니다!

메서드	설명
`addEventListener()`	지정된 요소에 이벤트 처리기를 연결합니다
`removeEventListener()`	`addEventListener()` 메서드로 추가된 이벤트 처리기를 제거합니다
`event.target`	이벤트를 트리거한 요소를 반환합니다
`event.currentTarget`	이벤트 리스너가 연결된 요소를 반환합니다
`event.preventDefault()`	취소 가능한 이벤트의 기본 동작을 취소합니다
`event.stopPropagation()`	이벤트 전파를 중단합니다
`element.classList.toggle()`	요소에 클래스 이름을 추가하거나 제거합니다

Credits: Image by storyset