[React] lodash debounce 사용

• Throttle vs Debounce
  • Throttle
    • 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 기법.
  • Debounce
    • 연달아 호출되는 함수들 중 마지막 함수만 호출하도록 하는 기법.
    •  

사용 예시를 보겠다.

 

사용하지 않았을 경우

onChange가 발생할 때 마다 axios가 호출된다. 

 

 

사용했을 경우

한번만 axios가 날라가게 된다. 

 

 

 const onDebounceApply = debounce((e: any) => {
    onClickApply(e);
  }, 1000);

  //각 단어는 한개 입력받은 이후 500ms 후에 입력 받음
  // 입력 후 1000ms 후에 검색 api 날라감
  const onDebounceChange = debounce((e) => {
    handleTextField(e);
    setTimeout(() => {
      onDebounceApply(e);
    }, 500);
  }, 500);

  const handleTextField = (e: any) => {
    dispatch(changeInput(e.target.value));
  };

  const onClickApply = useCallback(
    async (e) => {
      dispatch(getList(input));
    },
    [input, dispatch]
  );

 

onChange한 이후에 apply가 발생해야 함으로 setTimeout을 사용해주었다. 

네이버나 구글같이 검색 시 자동완성할때 주로 사용하겠다 싶네.