[리액트]중복 검색 요청 방지를 위한 debouncing 적용

페이지에서 검색 버튼을 연속으로 클릭할 경우, 여러 번의 검색 요청이 발생하여 잘못된 검색 결과를 반환하는 문제가 발생했다. 이 문제를 해결하기 위해 debouncing을 적용하였다.

 

🎈 Debouncing 이란??
짭은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막(또는 가장 처음) 이벤트로부터 일정 시간(delay)이 경과한 후에 한 번만 호출하도록 하는 것 => 특정 이벤트가 발생할 때 작동하는 비즈니스 로직이 과도하게 작동하는 것을 방지

 

 import { debounce } from "lodash";
 const searchButtonClickHandler = useCallback(
    debounce(() => {
      if (keyword.trim() === "") {
        setSearchResults([]);
        return;
      }
      const role = activeNavItem.toUpperCase();
      searchMutation.mutate({ keyword, option, role });
    }, 500),
    [keyword, activeNavItem, option, searchMutation]
  );

 

이를 통해 일정 시간 동안의 중복된 클릭 이벤트를 무시하고 마지막 클릭을 기준으로 검색을 수행하게 함으로써, 중복 검색 요청을 방지하고 사용자 경험을 개선할 수 있었다.