[React + Typescript] Debounce란?

개발하는 과정에서 사용자 입력값이 변경될 때마다 처리해야 하는 경우를 자주 마주치게 된다. 처음에는 입력값이 즉시 변화에 반응하는 것이 좋게 느껴지기도 했다. 하지만 프로젝트가 복잡해지면서 값이 변경될 때마다 API를 호출하거나 상태를 업데이트하는 작업이 부담스러워질 수 있다는 것을 깨달았다.

이런 상황에서 '디바운스(Debounce)'라는 것이 유용하게 사용될 수 있다.

Debounce란?

디바운스는 입력값이 변경될 때 일정 시간 동안 대기하다가, 그 시간 동안 다른 변경이 없으면 입력값에 대한 처리를 수행하는 것이다. 따라서 이벤트가 연속적으로 발생하던 것 중, 마지막 이벤트만 실행시켜 불필요한 리소스 소비를 줄이고, 성능을 향상할 수 있다.

Debounce 적용 방법

1. 라이브러리 사용

Debounce를 간단하게 작성할 수 있는 라이브러리들이 있다. 그중 가장 널리 사용되는 것은 Lodash이다. 이는 Javascript 유틸리티 라이브러리로, 간단하고 효율적인 방식으로 다양한 작업을 수행할 수 있다.

2. Custom Hook 생성

라이브러리를 사용하지 않고도, 커스텀 훅을 생성해서 debounce를 구현할 수 있다.

나는 debounce를 더 이해하기 위해 커스텀 훅을 생성하는 방식으로 구현해 보았다.

1) /Debounse.tsx 파일 생성

커스텀 훅을 생성해서 여러 곳에서 재사용할 예정이기 때문에 파일을 새로 생성한 후 함수를 정의해주었다.

const handleDebounce = (value: string, delay: number) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

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

  return debouncedValue;
};

debouncedValue 변수는 디바운스가 적용된 결괏값을 나타내고,
useEffect 훅 내에 있는 setTimeout 함수를 이용하여 입력값을 'delay' 시간 후에 'debouncedValue'로 업데이트 하도록 하였다.

2) handleDebounde 함수 호출

const [value, setValue] = useState('');

//함수 호출
const debouncedValue = handleDebounce(value, 300);

useEffect(() => {
  dispatch(changeTitle(debouncedValue));
}, [debouncedValue]);

const handleTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value);
};

return (
  <input type="text" onChange={e => handleTitle(e)} />
)

커스텀 훅에 매개변수를 전달하고, 그 결괏값을 debouncedValue 변수에 저장하였다.
그리고 useEffect 훅을 통해, 변숫값이 바뀔 때만 액션을 디스패치 하여 redux 값이 변경되도록 하였다.

결과

결론

입력 값이 변경될 때마다 리덕스 액션을 디스패치하는 대신, 입력 값의 마지막에만 액션을 발생시켜서 효율을 극대화하였다.
하지만 디바운스의 딜레이 시간인 0.3초 동안 값이 변하지 않으면, 이는 사용자에게 0.3초 동안 변경이 없던 것처럼 보일 수도 있다. 이를 해결하기 위해 로딩 스피너를 구현하여 사용자에게 변경이 발생하고 있다는 시각적인 피드백을 제공하는 것도 좋은 아이디어라고 생각한다.