[TIL] vanilla JS에 CustomEvent을 사용해보자!

CustomEvent 란?

이름 그대로, 원하는 이벤트 이름으로 Custom Event를 만들고,
매개변수 typeArg과 options을 갖는다.

typeArg : 이벤트의 이름을 나타내는 문자열
options : 다음 속성을 포함하는 객체
1. "detail": 이 이벤트 내에 포함할, 이벤트의 세부 정보를 나타내는 값. 기본 값은 null.
처리기에서 CustomEvent.detail 속성을 통해 이 값에 접근할 수 있다.
2. Event() 생성자의 옵션에 지정할 수 있는 모든 속성.

CustomEvent(typeArg);
CustomEvent(typeArg, options);

---

customEvent을 선택한 이유

캘린더를 구현하는 프로젝트에서 내 컴포넌트의 구조가 나뉘어 있는 상태였는데,
Calendar 컴포넌트에서 날짜를 받아와서, App 컴포넌트를 통해 DatePicker 컴포넌트로 넘겨줘야 하는 상황이었기에
어떤 방식으로 구현할지 고민하다가, CustomEvent를 사용하기로 결정하였다.

그 이유는 CustomEvent를 사용한다면 Calendar 컴포넌트에 이벤트 핸들러를 달아놓을 경우,
바깥 코드에서도 이벤트 리스닝을 통해 Calendar에서 어떤 일이 일어났는지를 파악할 수 있다.

---

customEvent를 사용해보자

아래의 mdn 예제 코드를 참고하여 구현하였음.

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

// 적합한 이벤트 수신기 부착
obj.addEventListener('animalfound', (e) => console.log(e.detail.name));

// 이벤트 발송
obj.dispatchEvent(catFound);
obj.dispatchEvent(dogFound);

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

 

Calendar 컴포넌트

빨간 박스 : Calendar 컴포넌트에서 내가 클릭한 날짜 fulldate를 내가 만든 print-date라는 이름의 CustomEvent를 생성.
초록 박스 : 이벤트 발송.

---

App 컴포넌트에 이벤트 수신기를 부착하여, fulldate라는 변수명으로 날짜를 받아왔다.
콘솔을 찍어보면 아래와 같이 제대로 작동하는 것을 볼 수 있음.

---

내가 구현한 캘린더 같은 경우는 날짜를 선택하면 input 박스에 즉시 렌더 되도록 만들었기에
datepicker 컴포넌트의 마크업을 생성할 때, 초기 value 값을 빈칸으로 두었고, 

 

calendar 컴포넌트로부터 날짜를 받아와, datepicker 컴포넌트 value값에 할당되도록 구현하였다.

---

 

요약

CustomEvent를 사용하면 Calendar 컴포넌트에 이벤트 핸들러를 달아놓을 경우,
바깥 코드에서도 이벤트 리스닝을 통해 Calendar에서 어떤 일이 일어났는지를 파악할 수 있다.

Calendar컴포넌트 캘린더 날짜를 클릭하면 CustomEvent를 생성 후 발송 ->
이벤트 수신기를 부착한 app컴포넌트에서 날짜를 받아옴 ->
app컴포넌트에서 가공된 데이터를 datePicker 컴포넌트 input에 defaultValue 값으로 할당시켜줌 ->
input에 날짜가 렌더 됨.