[javascript] 애로우 함수와 이벤트 위임

11 Dec 2023

javascript

이번에는 JavaScript의 애로우 함수와 이벤트 위임에 대해 알아보겠습니다. 애로우 함수는 ES6에서 도입된 새로운 함수 문법으로, 함수를 간결하게 작성할 수 있고, this의 동작 방식이 일반 함수와 다릅니다. 이벤트 위임은 부모 요소에 이벤트를 할당하여 자식 요소의 이벤트를 관리하는 방법으로, 동적으로 생성되는 요소에 유용합니다.

애로우 함수 (Arrow Function)

애로우 함수는 function 키워드 대신 => 기호를 사용하여 함수를 정의합니다. 주요 특징은 다음과 같습니다.

더 간결한 문법
this의 동작 방식이 일반 함수와 다르다

다음은 애로우 함수의 기본 문법입니다.

// ES5
function add(a, b) {
  return a + b;
}

// ES6
const add = (a, b) => a + b;

애로우 함수는 this를 lexical scope로 갖기 때문에, 함수를 호출한 객체에 바인딩됩니다.

const obj = {
  num: 10,
  addWithThis: function (a) {
    return this.num + a;
  },
  addWithArrow: (a) => {
    return this.num + a;
  }
};

console.log(obj.addWithThis(5)); // 15
console.log(obj.addWithArrow(5)); // NaN

이벤트 위임 (Event Delegation)

HTML 요소들에 일일히 이벤트를 할당하는 것은 비효율적일 수 있습니다. 이벤트 위임은 이러한 문제를 해결하기 위한 패턴으로, 부모 요소에 이벤트 리스너를 할당하여 자식 요소의 이벤트를 감지합니다. 이를 통해 동적으로 생성되는 요소도 쉽게 관리할 수 있습니다.

<ul id="parent-list">
  <li>아이템 1</li>
  <li>아이템 2</li>
  <li>아이템 3</li>
</ul>

const parent = document.getElementById('parent-list');
parent.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('클릭한 아이템:', event.target.textContent);
  }
});

부모 요소에만 이벤트를 할당하여 자식 요소들의 이벤트를 감지하는 것이 이벤트 위임입니다.

애로우 함수와 이벤트 위임은 모두 JavaScript의 효율적인 활용을 위한 중요한 기술들입니다. 애로우 함수를 사용하면 더 간결한 코드를 작성하고, 이벤트 위임을 통해 동적으로 생성되는 요소에 유연한 이벤트 처리를 할 수 있습니다.

이상으로 애로우 함수와 이벤트 위임에 대해 알아보았습니다.

참고 문헌: