검색어자동완성 debounce 설정

Debounce는 특정 시간 동안 연속적으로 호출되는 이벤트 중 마지막 이벤트만 호출할 때 사용하는 기법
https://dmitripavlutin.com/react-throttle-debounce/

// create debounce
const debouncedThing = _.debounce(thing, 1000);

// execute debounce, it will wait one second before executing thing
debouncedThing();

// it will prevent to execute thing content
executeThing = false;

 const onChange = (value: string) => {
    setSearchKeyword(value);
    debounceAutoComplete(value);
    if (!searchKeyword) {
      setSearchResult([]);
    }
  };

const debounceAutoComplete = useCallback(
    debounce(async (value: string) => {
      if (value[0] !== " " && value) {
        const res = await CallApi.request(
          `/api/v1/keywords/autocomplete/${value}`,
          "GET",
          null,
          null,
          debounceController.signal
        );
        setAutoCompleteList(res.resultList);
      } else {
        setAutoCompleteList([]);
      }
      console.log("debounce" + value);
    }, 300),
    []
  );

  useEffect(() => {
    return () => {
      debounceAutoComplete.cancel();
    };
  }, []);