Debounce로 성능 향상 시키기

yo_onms·2022년 6월 11일

React

목록 보기

4/7

키업으로 하게되면 api 호출을 자주 하게 되어 성능 저하의 문제가 있습니다.
그래서 debounce 이용하여 검색 기능을 구현해 보았습니다.

1. Debounce 란?

디바운싱(Debouncing)은 시간이 많이 걸리는 작업이 자주 실행되지 않도록 사용되는 프로그래밍 방법입니다.

디바운싱은 함수가 실행되기 전에 일정 시간을 대기하도록 합니다. 즉, 함수가 호출되는 속도를 제한합니다.

함수가 여러 번 호출되면, 일정 시간이 지난 후 마지막에 호출된 함수만 실행되고 이전의 호출된 함수는 무시됩니다.

2. 일반 Input Change

키업을 기준으로 코드를 짯습니다.


const Debounce = () => {

  //일반 input state
  const [normalValue, setNormalValue] = useState<string>('');

  //일반 input change
  const normalChange = (e: React.FormEvent<HTMLInputElement>) => {
    setNormalValue(e.currentTarget.value);
  };
  
  return (
    <>
      <Styled.Wrap>
        <Styled.InputWrap>
          <Styled.SearchInput
            placeholder="Nomal 입력"
            type="text"
            value={normalValue}
            onChange={normalChange}
          />
          <p> Normal: {normalValue}</p>
        </Styled.InputWrap>
      </Styled.Wrap>
    </>
  );
};

이런식으로 하게 되면 input 박스에 글자를 입력 할때마다 state에 값을 실시간으로 업데이트 하게 됩니다.
만약 api호출을 하게된다면 글자 하나하나 당 api를 호출하기 때문에 성능 저하의 원인이 될수 있습니다.

그래서 debounce 를 이용하여 일정 시간이 지난 후 마지막에 호출된 함수만 실행시키게 만들어 보았습니다.

3. debounce Input change


const Debounce = () => {

  //input state
  const [debounceValue, setDebounceValue] = useState<string>('');
  //debounce input state
  const [debounceResultValue, setDebounceResulValue] = useState<string>('');

  //input에 들어오는 글자
  const debounceChange = (e: React.FormEvent<HTMLInputElement>) => {
    setDebounceValue(e.currentTarget.value);
  };
  //debounce 처리된 input 값
  const debounceValueChange = (searchValue: string) => {
    setDebounceResulValue(searchValue);
  };
  
  //디바운스 시간 처리 및 함수 호출
  const debouncedSearchTerm = useDebounce(debounceValue, 500);

  //debounce 일정 시간 호출 되는지 확인
  function useDebounce(value: string, delay: number) {
    const [debouncedValue, setDebouncedValue] = useState(value);
    useEffect(() => {
      const handler = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);

      return () => {
        clearTimeout(handler);
      };
    }, [value, delay]);

    return debouncedValue;
  }

  //debounce 실시간 처리
  useEffect(() => {
    if (debouncedSearchTerm) {
      debounceValueChange(debouncedSearchTerm);
    } else {
      setDebounceResulValue('');
    }
  }, [debouncedSearchTerm]);

  return (
    <>
      <Styled.Wrap>
        <Styled.InputWrap>
          <Styled.SearchInput
            placeholder="Debounce 입력"
            type="text"
            value={debounceValue}
            onChange={debounceChange}
          />
          <p>Debounce: {debounceResultValue}</p>
        </Styled.InputWrap>
      </Styled.Wrap>
    </>
  );
};

위에서 부터 코드를 설명 하겟습니다.

debounceChange를 통해 input에 입력되는 값을 받게 됩니다.
debounceValue의 값이 바뀌며 의존성이 걸린 debouncedSearchTerm가 실행이됩니다.
debouncedSearchTerm이 실행되면 useDebounce 함수가 실행이되는데 여기서 input 값이랑 delay(시간)을 기준으로 일정 시간 동안 input값이 추가 적으로 입력되는지 보게됩니다.
만약 delay시간동안 추가적인 입력이 없게되면 useEffect를 통해 debounceResultValue 의 값이 바뀌면서 결과값이 노출되게 됩니다.