사용자 입력창을 최적화 해보자 (Debounce, Throttling)

📌 시작하기 앞서

---

프로젝트를 진행 중 검색API가 불필요하게 많은 요청을 보내는 것을 확인 후 최적화를 해보고 어떻게 최적화를 할 수 있었는지 확인을 위해 코드를 짜봤다.

💡 최적화 전

텍스트를 칠 때마다 API를 호출하다보니 검색창이 계속 깜빡이고 퍼포먼스 탭에서 성능을 확인한 결과 최적화가 필요할 것 같다.

💡 최적화 후 (Debounce 버전)

디바운스를 써보니 마지막으로 호출한 API만 호출한다. 불필요한 API 호출이 줄었다.
퍼포먼스 탭에서의 성능도 좋아졌다.

💡 최적화 후 (Throttling 버전)

쓰로틀링을 써보니 API 호출이 주기를 가지고 한번씩만 호출이 된다. 최적화 전보다 굉장히 준수하다.

📌 디바운스와 쓰로틀링은 내부적으로 어떻게 동작할까?

---

💡 Debounce를 구현해보자

 const debounceTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);

  const handleDebounceChange = (value: string) => {
    if (debounceTimeout.current) {
      console.log(debounceTimeout.current);
      clearTimeout(debounceTimeout.current);
    }

    debounceTimeout.current = setTimeout(() => {
      setSearchData(value);
    }, 500);
  };

디바운스 순서 정의

• debounceTimeout이라는 ref 변수 선언 ( ref는 렌더링 x )
• 0.5초 안에 재호출이 일어나지않으면 API 호출
• 0.5초 안에 재호출이 일어나면 이전 타이머를 취소하고 재시작

💡 Throttling를 구현해보자

  const throttleTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);

  const handleThrottleChange = (value: string) => {
    if (!throttleTimeout.current) {
      setSearchData(value);
      throttleTimeout.current = setTimeout(() => {
        throttleTimeout.current = null;
      }, 500);
    }
  };

쓰로틀링 순서 정의

• throttleTimeout이라는 ref 변수 선언 ( ref는 렌더링 x )
• 호출한 API가 없으면 API호출
• 그 후 0.5초 안에 재호출이 일어난다면 스킵. 0.5초가 지나면 null을 할당하면서 재호출 가능

📌 후기

---

디바운스와 쓰로틀링 둘 중에 뭐가 더 잘 어울릴지 고민했다.
나 같은 경우는 중간중간 검색 결과를 보여주는 것보다 마지막에 내가 원하는 결과를 보여주는게 좋아보여서 디바운스를 선택해 구현했다.
최적화는 재밌다.