[React] 디바운싱을 이용한 API 요청 #1

디바운싱(Debouncing)

연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

디바운싱은 언제 사용하면 좋을까요?
디바운싱은 사용자가 보내는 여러 요청들 중 마지막 요청만 보낼 수 있도록 기능을 구현할 때 주로 쓰입니다. 그중에서도 검색의 자동완성 기능을 만들 때 사용하는데요. 왜 검색 기능을 구현할 때 디바운싱을 사용할까요?

이에 대해서 알아보기 전에 먼저 디바운싱을 구현하지 않았을 때 어떻게 되는지를 살펴보도록 하겠습니다.

왼쪽은 게시글의 목록을 보여주고 있고 이곳에서 검색어입력을 통해 제목이 같은 게시글들을 불러올 수 있습니다.

디바운싱이 되어 있지 않은 상태에서 검색을 해보도록 하겠습니다.

다음과 같이 API요청이 각 한 글자마다 되고있는데요. React의 input태그의 onChange함수의 특성 때문입니다.

이렇게 사용자가 원하지도 않는 검색어들이 검색되고 또 쓸데없는 트래픽만 높이는 이와 같은 상황을 저희는 피해야 하는데요. 이를 해결해 줄 수 있는 기능이 바로 디바운싱입니다.

코드를 살펴보기 전에 디바운싱을 사용했을 때는 console창에 어떻게 나타나는지 살펴보도록 하겠습니다.

다음과 같이 디바운싱 처리를 해주면 요청이 단 한 번만 이뤄져 보다 효율적인 기능을 만들 수 있습니다.

그렇다면 이 디바운싱은 어떻게 구현할 수 있을까요?

1. lodash의 라이브러리

2. 직접 구현

1. lodash의 라이브러리

  // 라이브러리 디바운스
  import _ from "lodash";
  
  const getDebounce = _.debounce(() => {
    refetch({
      search: e.target.value,
      page: 1,
    });
  }, 1000);

  const onChangeSearch = (e) => {
    getDebounce(e);
  };

위 처럼 deounce() 함수를 setTimeout처럼 사용해주시면 쉽게 구현할 수 있습니다.

그렇지만 종종 라이브러리 사용이 제한되는 상황들이 있는데요. 이때에는 어떻게 직접 구현할 수 있을까요?

2. 직접구현

let timer: any;

const onClickSearch = (e) => {
	if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      refetch({
        search: e.target.value,
        page: 1,
      });
    }, 1000);
  };

바로 setTimeout과 clearTimeout을 사용해주시면 됩니다.