[Day 16] 디바운싱, 커스텀 이벤트

디바운싱 (debouncing)

이벤트 발생을 지연시키다가 마지막으로 이벤트가 발생하고 일정 시간이 지나면 지연했던 이벤트를 실행시키는 것이다.

이벤트 발생횟수를 줄임으로써 서버 부하를 줄여 성능 최적화에 도움이 된다.

 

이벤트는 setTimeout()과 clearTimeout()으로 지연시킬 수 있다.

setTimeout()은 실행을 하면 양의 정수값을 반환하는데 이를 이용하여 clearTimeout()으로 초기화하는 것이 가능하다. 

let timer = null;

new Editor({
  $target,
  initialState: post,
  onEditing: (post) => {
    if (timer !== null) {
      clearTimeout(timer);
    }

    timer = setTimeout(() => {
      setItem(TEMP_POST_SAVE_KEY, {
        ...post,
        tempSaveDate: new Date(),
      });
    }, 2000);
  },
});

이벤트가 발생할 때마다 이전에 설정해둔 내용을 clear시키고 다시 새로운 timer를 설정한다.

설정해둔 시간(2초) 내에 이벤트가 다시 발생하지 않으면 setItem이 실행된다. 

 

커스텀 이벤트

부모와 자식 컴포넌트간에 이벤트를 전달하고 받기위해서 커스텀 이벤트를 사용할 수 있다. 

아래 코드는 커스텀 이벤트를 통해 라우팅을 처리하고 있다. 

const ROUTE_CAHNGE_EVENT_NAME = "route-change";

export const initRouter = (onRoute) => {
  window.addEventListener(ROUTE_CAHNGE_EVENT_NAME, (e) => {
    const { nextUrl } = e.detail;

    if (nextUrl) {
      history.pushState(null, null, nextUrl);
      onRoute();
    }
  });
};

export const push = (nextUrl) => {
  window.dispatchEvent(
    new CustomEvent("route-change", {
      detail: {
        nextUrl,
      },
    })
  );
};

window에 임의의 이벤트 이름을 정해두고 특정한 상황에서 이 이벤트에 데이터를 실어 보냄으로써 컴포넌트의 depth를 무시하고 글로벌하게 사용이 가능하다.

남용하면 디버깅이 어렵기 때문에 이벤트 발생 시점이 명확할 때 사용하는 것이 좋다. 

 

---

출처: 프로그래머스 프론트엔드 데브코스 

[Day 16] VanillaJS를 통한 자바스크립트 기본 역량 강화 I (8)