React Component debounce 적용

Roxanne Gonzales - Speech bubble clouds on a navy background (right)

 

---

 

Debounce는 이벤트가 발생할 때 연속해서 발생하는 동일한 이벤트를 무시하고, 일정 시간이 지나면 해당 이벤트를 실행하는 것을 의미합니다. 이를 통해, 이벤트 발생 시간 간격이 짧은 경우 중복 처리되는 문제를 방지할 수 있습니다. React에서 input을 사용하는 경우 debounce를 적용하여 성능을 개선할 수 있습니다.

 

일반적으로 lodash 라이브러리에서 제공하는 debounce 함수를 사용합니다. lodash 라이브러리는 사이즈가 크기 때문에 lodash/debounce 형태로 import하는 것이 권장되고 있습니다. (https://lodash.com/per-method-packages)

 

import debounc from "lodash/debounce";

const MyComponent = () => {
  const handleChange = debounce((value) => {
    // input 값이 변경되었을 때 실행되는 함수
  }, 100);

  return (
    <div>
      <input type="text" onChange={(event) => handleChange(event.target.value)} />
    </div>
  );
};

 

위 코드와 같이 함으로써, input 값이 변경될 때마다 handleChange 함수가 실행되지 않고 일정 시간이 지난 후에 실행되도록 할 수 있습니다.

 

하지만 handleChange에 component의 state를 업데이트하는 로직이 있다면 debounce가 정상적으로 동작하지 않습니다. state가 업데이트되면서 re-rendering이 발생하고, 이때 handleChange 함수도 재선언되기 때문입니다. 따라서 handleChange 함수가 re-rendering시에도 재선언되지 않도록 useCallback으로 감싸주어야합니다. (미래의 react에서는 이를 자동으로 처리해준다고 합니다...!)

 

import debounc from "lodash/debounce";

const MyComponent = () => {
  const [value, setValue] = useState();
  const handleChange = useCallback(debounce((value) => {
    // input 값이 변경되었을 때 실행되는 함수
    setValue(value);
  }, 100), []);

  return (
    <div>
      <input
      	type="text"
        onChange={(event) => handleChange(event.target.value)}
        value={value}
      />
    </div>
  );
};

 

이때 아래와 같은 eslint warning이 발생할 수 있습니다.

 

React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead.
eslint react-hooks/exhaustive-deps

useCallback(debounce()) 형태가 아니라 useCallback(() => debounce()) 로 작성해주면 warning을 제거할 수 있습니다. 그러나 이 경우 useCallback 으로 감싸주기는 했지만, debounce를 선언하여 실행하는 함수를 감싸준 것이기 때문에 첫번째 코드와 동일하게 동작합니다. 따라서 warning을 제거하는 주석 (// eslint-disable-next-line react-hooks/exhaustive-deps)을 추가하여 그대로 사용합니다.