[Refactor] 디바운싱으로 불필요한 쿼리와 리렌더링 방지하기

* 코드스테이츠 메인 프로젝트로 진행한 "JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉"을 팀원들과 함께 리팩토링하면서 작성한 일지입니다.

메인프로젝트 소개와 회고 보기

 

조잉 프로젝트의 검색 기능에는 자소 단위의 검색어 자동완성 기능이 적용돼 있다.

이처럼 키를 하나 칠 때마다 검색어 자동완성 엔드포인트에 현재까지 입력된 input에 대한 요청을 보내고, 받아온 데이터를 화면에 표시하는 방식이다. 현재까지 입력한 검색어를 통해 어떤 컨텐츠를 검색해 볼 수 있는지 한눈에 볼 수 있어서 편리하지만, 키보드 입력을 한번 할 때마다 하나의 요청과 응답이 오가고 리렌더링이 이뤄지기 때문에 꽤나 많은 리소스를 소모한다고 볼 수도 있다.

이 부분에서 디바운싱을 적용해서 일정 시간 내에 연속적으로 이뤄진 키보드 입력 이벤트에 대해서는 마지막 입력에 대해서만 관련된 작업들을 처리해주도록 리팩토링을 해 보았다.

import { useState, useEffect } from 'react';

function useDebounce(value: string, delay = 1000) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(handler);
  }, [value]);

  return debouncedValue;
}

export default useDebounce;

이처럼 useDebounce 커스텀 훅을 만들어 디바운싱이 필요한 곳에서 가져다 쓸 수 있도록 했다.

  const fetchValue = useDebounce(userInput, 500);
  const data = useAutoCompleteQuery(fetchValue);

검색창 컴포넌트에서는 이처럼 디바운싱을 적용한 키워드를 fetchValue에 할당하고 자동완성 쿼리를 보내는 커스텀훅에 해당 키워드를 넣어주었다. useDebounce의 기본 delay 값은 1000밀리세컨드이지만 ux상으로 1초가 지나야 검색어 자동완성이 되는 것은 너무 느리다고 생각돼서 500밀리세컨드로 설정해 보았다.

 

 

이렇게 자동완성이 잘 되면서도 빠른 입력에 대해서는 한번에 처리하는 것을 볼 수 있다. 불필요한 쿼리 요청과 리렌더링을 방지해서 성능 향상에 도움이 되었다.