debounce(디바운싱), throttle(쓰로틀링)

Lodash

• JavaScript 라이브러리이며,
• 배열, 숫자, 객체, 문자열 등으로 작업하는 번거로움을 없애 복합적인 함수 생성에 더욱 쉽게 만들 수 있어 js의 코드를 줄일 수 있고, 빠른 작업이 가능하다.

https://www.npmjs.com/package/lodash
https://lodash.com/ (npm을 사용할 경우 옆의 URL 참조)

yarn을 사용할 경우

$ yarn add lodash

typescript로 작성할 경우 아래의 lodash type도 같이 설치해 줘야 한다.

$ yarn add @types/lodash --dev

사용은 아래의 방법과 같이 사용하면 된다. (검색 기능을 만들 때 debounce의 속성 적용)

import _ from 'lodash'

const getDebounce = _.debounce((data) => {
    refetch({ search: data, page: 1 });
    setKeyword(data);
}, 200);

debounce

디바운스는 이벤틀를 반복적으로 실행할 때, 시간을 지정한 후 그 시간이 지나면 동작하게 끔 하는 것이다.
대표적인 예로 검색창에 onChange가 되면 자동완성 검색이 되는 기능이라 할 수 있다.

아래의 예시는 data를 가져온 상태에서 검색창에 검색 했을 때 0.2초가 지난 후 검색 되는 코드이다.

export default function SearchPage() {
  const [keyword, setKeyword] = useState("");

  const { data, refetch } = useQuery<
    Pick<IQuery, "fetchBoards">,
    IQueryFetchBoardsArgs
  >(FETCH_BOARDS);

  const getDebounce = _.debounce((data) => {
    refetch({ search: data, page: 1 });
    setKeyword(data);
  }, 200); // 마지막 입력 후 0.2초가 지나면 작동

  const onChangeSearch = (event: ChangeEvent<HTMLInputElement>) => {
    getDebounce(event.target.value);
  };


  const onClickPage = (event: MouseEvent<HTMLSpanElement>) => {
    if (event.target instanceof Element)
      refetch({ search: keyword, page: Number(event?.target.id) });
  };

  return (
    <>
      <h1>검색 페이지</h1>
      검색어 입력: <input type="text" onChange={onChangeSearch} />
      {data?.fetchBoards.map((el) => (
        <div key={el._id}>
          <span>{el.writer}</span>
          <span> {el.title}</span>
        </div>
      ))}
    </>
  );
}

throttle

쓰로틀링은 이벤트 발생 즉시 실행되며 마지막 함수가 호출된 이후 지정한 시간이 지나기 전에 호출되지 않도록 하는 것이다.

대표적으로 지도 앱에서 드래그 할 때 이벤트가 시작될 때 실행하는 기능이다.

debounce 또는 throttle의 차이는 이벤트를 언제 발생 시킬지의 차이이며,
value가 onChange가 될 때마다 query event가 발생하여 불필요한 데이터를 가져오기 때문에 debounce와 throttle은 이 실행 빈도를 줄여준다.