검색창을 이용해 지역명 또는 구장명을 검색하여 원하는 구장의 상세페이지로 이동 할수 있게끔 유저에게 편의 기능을 제공하기 위해 검색 기능을 구현하였습니다.

검색 기능은 실시간으로 백엔드 쿼리를 보내기 때문에 서버 과부하를 줄 수 있어, 검색 기능의 최적화를 이끌어 내기 위해 Debounce와 Caching을 적용하였습니다.

1. Debounce

Debounce를 적용할 경우 실시간성이 저하되는 단점이 있어 지연 시간을 조정하여 응답 속도를 향상시켰습니다.

const showDropDownList = useCallback(
  debounce(async () => {
    // ...
  }, 200),
  [inputValue, setIsHaveInputValue, setDropDownList, dropDownCache]
);

2. Caching

캐싱 작업은 이미 캐시된 결과가 있는 경우 해당 결과를 사용하여 드롭다운 목록을 업데이트합니다. 만약 캐시된 결과가 없다면 백엔드 서버로 요청을 보내고 응답으로 받은 데이터를 업데이트한 뒤, 동시에 setDropDownCache 함수를 호출하여 해당 값을 캐시에 저장합니다.

const [dropDownCache, setDropDownCache] = useState({});
// ...
if (dropDownCache[inputValue]) {
  setDropDownList(dropDownCache[inputValue]);
} else {
  // ...
    setDropDownList(response.data);
    setDropDownCache((prevState) => ({
      ...prevState,
      [inputValue]: response.data,
    }));
}