지식을 채우기 급급한 내가 지식 공유를?_JavaScript 커스텀 이벤트

Jaehyun Ahn·2023년 10월 26일

프로프래머스 데브코스 프론트엔드 5기에 참가하면서, 테코톡을 경험해볼 수 있는 기회가 생겼다.

테코톡이란 우아한테크코스의 문화 중 하나로, 동료들과 학습한 내용을 공유하고 이야기하는 시간을 가지는 것을 말한다.

프론트엔드 분야의 지식이 부족한 내가 "정확하게 내용을 학습하고 다른 분들이 이해할 수 있도록 설명할 수 있을까?" 라는 걱정이 앞섰지만,
필요한 지식을 직접 찾아 학습하고, 다른 분들 앞에서 설명할 수 있는 경험은 쉽게 할 수 있는 것이 아니고, 나에게 도움이 되는 경험이라고 생각하여 테코톡 발표를 신청하였다.

CSS 트랜지션(Transition)과 애니메이션(animation), JWT (JSON Web Token)에 대해 학습하고 발표해보고 싶었지만
데브코스 노션 클로닝 과제를 진행하면서 JS 커스텀 이벤트에 대해 알게 됐고, 알아두면 유용하게 써먹을 수 있을 것 같아 JS 커스텀 이벤트를 주제로 잡았다.

커스텀 이벤트(Custom Event)란?

커스텀 이벤트 : JS의 내장 이벤트(click, change 등등) 이외에 사용자가 생성한 이벤트.

말 그대로 사용자가 직접 만든 이벤트로 이해하면 된다.

커스텀 이벤트는 용도에 따라 원하는 데이터를 보낼 수 있는 장점이 있다. (detail 객체)

커스텀 이벤트를 왜 사용해?

JS 내장 이벤트로는 코드 작성자가 원하는 이벤트 흐름을 표현하지 못할 수도 있다.

예를 들자면 url이 바뀔 때마다 이벤트를 발생시키고 싶어요., 로컬 스토리지에 값이 바뀔 때마다 이벤트를 발생시키고 싶어요 같은 상황에서는 JS 내장 이벤트로는 이벤트를 발생시키거나, 다른 해결 방법을 떠올리기 쉽지 않다.

이때 목적에 맞게 이벤트를 직접 만들어서 사용한다면 ?
원하는 기능을 구현할 수 있는 가능성이 높아진다.

커스텀 이벤트는 어떻게 만들어 ?

일반적으로 new CustomEvent() 메서드를 사용하여 커스텀 이벤트를 만든다.
new Event() 메서드를 사용하여 만들 수도 있지만 이후에 나올 detail을 사용할 수 없으므로 주의할 필요가 있다.

const newEvent = new CustomEvent(type, option);

new CustomEvent() 메서드는 2가지 매개변수를 가진다.

type : 커스텀 이벤트의 이름을 나타내는 문자열
option : detail, bubbles, cancelable, composed 속성을 가지는 객체이다.

option 속성	설명
detail	이벤트 발생 시, 넘기고 싶은 정보(데이터)를 담을 수 있다. 기본값은 null.
bubbles	이벤트의 버블링 여부를 나타내는 불리언 값. 기본값은 false. 상위 요소에서 커스텀 이벤트를 감지하고자 한다면 true로 설정하자.
cancelable	이벤트를 취소할 수 있는지 나타내는 불리언 값. 기본값은 false. true로 설정 시 `e.preventDefault()`로 이벤트를 취소할 수 있다.
composed	이벤트가 섀도 루트(shadow root) 바깥의 이벤트 수신기로도 전달될지 나타내는 불리언 값. 기본값은 false.

detail로 내가 원하는 값을 넘겨줄 수 있다고 ?

new CustomEvent()로 만든 커스텀 이벤트는 detail을 통해 커스텀 이벤트에 원하는 값을 넘길 수 있다. (new Event() 메서드로 만든 것은 안된다.)

아래 예시는 route-event라는 이름을 가진 커스텀 이벤트를 만든 것이다.

const newEvent = new CustomEvent('route-change', {
	detail: '/documents/{ID}'
})

// detail은 이벤트가 발생한 곳에서 e.detail로 접근 가능하다.

커스텀 이벤트는 어떻게 사용해 ?

dispatchEvent()로 이벤트를 실행하자.

생성한 커스텀 이벤트를 사용하려면 꼭 dispatchEvent()를 호출하여 이벤트를 실행해야 한다.

커스텀 이벤트를 생성한 경우, 커스텀 이벤트 실행 전 반드시 addEventListener 메서드로 이벤트 핸들러를 등록해야 한다는 것도 잊지 말자.

// CustomEvent 생성
const catFound = new CustomEvent("animalfound", {
  detail: {
    name: "cat",
  },
});
const dogFound = new CustomEvent("animalfound", {
  detail: {
    name: "dog",
  },
});

// 이벤트 핸들러 등록
window.addEventListener("animalfound", (e) => console.log(e.detail.name));

// 이벤트 실행
window.dispatchEvent(catFound);
window.dispatchEvent(dogFound);

// 콘솔에 "cat"과 "dog"가 기록됨

JS 내장 이벤트 + 커스텀 이벤트

커스텀 이벤트 개념을 알기 전까지 나는 JS 내장 이벤트로 모든 상황의 이벤트를 다루어야 한다고 생각했다.
그래서 이전에 데브코스 과제를 할 때 "로컬 스토리지의 변화를 감지하려면 어떤 이벤트를 써야할까 ?" 라는 고민을 했었고, 이를 해결하지 못해 결국 다른 방법을 사용했던 기억이 있다.

JS 내장 이벤트가 아닌 별도의 이벤트가 필요하다면 커스텀 이벤트를 사용하여 문제를 해결해보는 것은 어떨까?
(단, new Event()는 new CustomEvent()처럼 detail을 사용할 수 없다는 것을 명심하자.)

또 하나의 접근 방법을 알 수 있었던 것 같아서 나에겐 정말 유용한 개념으로 사용될 것 같다.