[구현 및 최적화 스터디] 자동완성 검색(디바운싱과 쓰로틀링)

🌱  결과물

 

🌱  디바운싱(Debouncing)

: 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

 

아래는 디바운싱을 적용하기 전과 후의 검색어 요청 모습이다.

적용 전

적용 후

 

"안녕하세요" 라는 검색어를 입력 중인데, 적용 전은 매 입력마다 요청을 하고, 적용 후에는 최종 검색어만 요청을 한다.

// 디바운싱
  const [debouncedInput, setDebouncedInput] = useState<string>(input);
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedInput(input);
    }, 300); // 300ms 지연

    return () => {
      clearTimeout(handler);
    };
  }, [input]);
  const { data } = useWebResults(debouncedInput);

 

디바운싱을 구현한 코드이다. input 값이 변경된 후 300ms 동안 입력이 없을 때에만 debouncedInput 값을 업데이트한다.

장점을 정리하면 아래와 같다.

 

1. 불필요한 API 호출을 방지

• 입력창에 텍스트가 입력될 때마다 API 요청을 보내면 사용자가 입력할 때마다 여러 번 요청이 발생하여 서버에 부담을 줄 수 있다.
• 디바운싱을 통해 사용자가 타이핑을 멈춘 후에만 요청을 보내므로, 불필요한 API 호출을 줄여 네트워크 자원을 절약할 수 있다.

2. 응답 대기 시간 개선

• 입력할 때마다 API 요청을 보내면 서버로부터 많은 응답이 오가게 되어 응답 처리에 시간이 지연될 수 있다.
• 요청 빈도를 줄이면, 사용자는 검색 결과를 더 빠르게 볼 수 있다.

3. 불필요한 컴포넌트 렌더링 최소화

• 입력이 변경될 때마다 컴포넌트가 여러 번 다시 렌더링될 수 있다.
• 디바운싱을 통해 렌더링을 최적화하여 컴포넌트가 효율적으로 작동하게 한다.

 

🌱  쓰로틀링(Throttling)

: 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것

 

쓰로틀링은 성능 문제 때문에 많이 사용한다. 실행 횟수에 제한을 거는 것이다.

예를 들어, 스크롤 이동 이벤트 때 쓰로틀링을 걸어준다. 스크롤을 올리거나 내릴 때 스크롤 이벤트가 매우 많이 발생한다. 스크롤 이벤트를 매 순간 감지한다면 렌더링이 잦아져서 성능 또는 보기에도 문제가 발생할 수 있다. 쓰로틀링을 걸어줌으로서 몇 초에 한 번, 또는 몇 밀리초에 한 번씩만 실행되게 제한을 둔다.

 

디바운싱과 쓰로틀링은 함수 호출을 제어하여 성능을 최적화할 때 사용하는 기법이다. 비슷하지만, 동작 방식에 차이가 있다.

 

 

 

 

 

 

참고

https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa