✂️ 분배된 이슈

• 지도 클릭시 연관검색어 리스트 닫기 #80
• 검색 API 호출 최적화 수정 #82

🚩 구현 목표

• 지도 클릭시 연관검색어 리스트 닫기
• 검색 API 호출 최적화 useDeferredValue 대신 debounce 적용

🍀 세부 목표

• 연관검색어 리스트 이외의 곳 클릭 혹은 터치시 닫히게 하기
  • 연관검색어 줄여 지도 더 노출시키기
• 검색 API 날리는 것 최적화 현재 useDeferredValue이지만 학습 후 좋은 것 적용

🚧 Trouble Shooting

const timer = useRef<NodeJS.Timeout | null>(null);

// let timer: NodeJS.Timeout | null = null;

...

if (timer.current) {
  clearTimeout(timer.current);
}

timer.current = setTimeout(async () => {

  setIsRelatedAreaListOpen(true);

  const { data: responseRelatedAreaInfo }: GetRelatedAreaResponseTypes =
    await apis.getRelatedAreaInfo(searchAreaName);

  setRelatedAreaInfo(responseRelatedAreaInfo);
}, 500);

• timer를 컴포넌트 안에 let으로 선언하여 구현하면 debounce가 적용되지 않는다.
• useRef를 통해 선언하면 잘 동작한다.

🎸 기타

• 연관검색어 리스트도 모달창으로 봐도 될 것 같아 Modal 컴포넌트를 재활용해보려 했지만 포기