쓰로틀링과 디바운싱을 적용해보자

나는 Wayg웹 페이지에서 검색기능을 구현하던 도중 우연히 구글에 쓰로틀링과 디바운싱이라는 기술을 발견하게 되었다.

현재 쓰로틀링 or 디바운싱을 적용하시 않았을 때의 검색구현이다.

한글자마다 계속 query를 요청하게 되면 ui적으로도 더럽고, 성능도 매우 떨어진다.

쓰로틀링(throttling)

: 쓰로틀링(throttling)은 일반적으로 함수나, 이벤트핸들러를 일정한 주기로 실행하는 것을 뜻한다

디바운싱(debouncing)

: 디바운싱(debouncing)은 쓰로틀링과는 다르게 마지막 이벤트 및, 마지막 요청만 처리하는 기술을 말한다

오늘 내가 적용할 것은 디바운싱이다.

디바운싱이 더 맘에 듦 ㅎㅎ

디바운싱 적용 전 코드

const findSchool = (e: React.ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value);
  };

  const schoolInfoQuery = useSchoolInfoQuery(page, name);

디바운싱 적용 후 코드

const findSchool = (e: React.ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value);
  };

  useEffect(() => {
    const timerId = setTimeout(() => {
      setDebouncedName(name);
    }, 500);

    return () => {
      clearTimeout(timerId);
    };
  }, [name]);

  const schoolInfoQuery = useSchoolInfoQuery(page, debouncedName);

적용 전 코드는 그냥 보이는대로 내가 input창에 값을 입력할때마다 그 값을 해당 Controller단에 보내는 코드이다.

이제 적용 후 코드를 하나하나 다 분석을 해보자

const findSchool = (e: React.ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value);
  };

이 부분의 코드는 동일하다. name에다 내가 넣은 값을 넣어주고,
이를 setTimeout을 사용하여 0.5초마다 debounceName에다 다시 넣어준다.

  const timerId = setTimeout(() => {
      setDebouncedName(name);
    }, 500);

그런데 이때

return () => {
      clearTimeout(timerId);
    };

clearTimeout을 통해서 상태값이 변경할 동안 해당 함수에 있는 setTimeout을 계속해서 초기화 해주는 것을 의미한다.

적용 후 화면

이렇게 깔끔하게 잘 검색되는것을 확인할 수 있다.

디바운싱 끝!