개발 리뷰 -9- 디바운스 처리를 위한 지연 검색

#1 디바운스 처리란?

짧은 시간 내에 여러 번 발생하는 이벤트를 제한하고, 마지막 이벤트가 발생한 후 일정 시간이 지난 뒤에 한 번만 실행되도록 만드는 기술을 통칭함.

 

#2 지연 검색의 핵심 아이디어

1. searchKeyword와 debouncedKeyword 를 분리하여, searchKeyword가 변경 될 때마다 setTimeout을 설정한다.
2. searchKeyword가 그 전에 변경되면, clearTimeout으로 해당 callback을 무효화한다.

3. useEffect는 해당 useEffect가 다시 시작되기 직전에 불리는 로직이다. 따라서 시간순으로 나열하면 useEffect가 한 번 호출되었을 때는 return하지 않고, useEffect 사이에서 동작한다고 볼 수 있다.

 

 

#3 구현한 예시 코드

const [searchKeyword, setSearchKeyword] = useState("");
  const [debouncedKeyword, setDebouncedKeyword] = useState("");

  // 검색어 디바운스 처리
  useEffect(() => {
    const timerId = setTimeout(() => {
      setDebouncedKeyword(searchKeyword);
      console.log(searchKeyword);
    }, 300); // 0.3초 지연

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

  // tanstack query를 사용한 데이터 불러오기 (디바운스된 검색어 사용)
  const { data: corporateList, isLoading } = useQuery({
    queryKey: ["corporateList", debouncedKeyword],
    queryFn: async () => {
      const response = await corporateListApi.getCorporateList(
        debouncedKeyword
      );
      return response.data;
    },
  });