[TIL] Day-20

강의를 들으며 실습하던 중 새롭게 알게된 것들에 대해 써보려고 한다.

웹 API를 이용해 이벤트 지연시키기

let timer = null;

onEditing: (post) => {
      if (timer !== null) {
        clearTimeout(timer);
      }
      timer = setTimeout(async () => {
        setItem(postLocalSaveKey, 
          ...post,
          tempSaveDate: new Date(),
          });
        }
      }, 2000);
    },

1. 이벤트가 발생될 때마다 결과값을 인자로 해서 onEditing함수가 실행된다.
2. 로컬에 저장되는 것은 onEditing함수 실행 후 2000ms후에 되게 한다.
3. 500ms이 지나기 전에 이벤트가 발생해 함수가 또 실행되면
   clearTimeout을 이용해 전에 등록해놓은 setTimeout을 취소한다.
4. 500ms이 될 때까지 함수가 다시 실행되지 않으면 등록된
   setTimeout함수가 실행된다.

Custom Event만들기

부모-자식간의 상태를 계속 물려주지 않아도, 루트 컴포넌트에 Custom Event리스너를 달아주면, 하위 컴포넌트 어디에서 Custom Event가 발생하더라도 루트 컴포넌트에서 바로 처리할 수 있게 된다.

생성

window.dispatchEvent(
    new CustomEvent("route-change", {
      // detail객체는 e객체의 프로퍼티가 된다
      detail: {
        nextUrl: `/posts/${id}`, 
      },
    })
  );

detail이라는 프로퍼티를 추가해 커스텀 이벤트 관련 정보를 명시하고,
정보를 이벤트에 전달할 수 있다.

첫번째 인자로 생성하려는 이벤트의 이름을 적고,
두번째 인자로는 해당 이벤트 객체에 넣을 프로퍼티를 설정해준다.
이벤트 객체를 생성하고, 발생시켜줘야 사용할 수 있다.
그렇기에 생성한 이벤트 객체를 dispatchEvent함수의 인자로 넣어 실행시켜준다.
여기에선 window에 발생시켰다.

사용

window.addEventListener("route-change", (e) => {
    const { nextUrl } = e.detail;
    if (nextUrl) {
      history.pushState(null, null, nextUrl);
      onRoute();
    }
  });

생성한 커스텀 이벤트를 등록하고, 이벤트가 발생하면 event객체에 들어있는 detail객체의 값을 이용해서 코드를 실행한다.
윈도우에서 이벤트를 발생시켰기 때문에 윈도우에서 발생된 이벤트를 읽어서 처리하는 것.

참고