[스터디기록01/티코드(React)] 디바운싱(Debouncing) 구현방법 배우기

🏔️ 티코드 스터디 소개
- 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디
- 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것

 

👾  문제상황

검색어를 입력하면 API 요청을 통해 검색 결과를 받아오고 있다고 가정해보자.

엔터없이 검색어를 적을 때마다 일치하는 결과 여부를 보여주려면 onChange 이벤트가 사용자의 입력을 실시간으로 체크하고 있어야한다. 이때 문제는 한글자씩 입력할 때마다 API 요청이 들어가는데에 있다.

'대한민국'이란 단어를 쳤을 때 onChange 이벤트의 결과

 

만약 대규모 서비스에서 이런 불필요한 이벤트가 동시다발적으로 발생하게 되면 어떻게 될까?

서버에 쿼리를 요청하는 횟수가 증가하면서 서버 비용과 자원 소모가 크게 증가하게 될 것이다.

이러한 문제는 사용자의 요청 중 마지막 요청만 전달하는 디바운싱(Debouncing) 기법으로 해결이 가능하다.

 

📑  디바운싱(Debouncing)이란?

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

 

[출처] JavaScript Dev(링크)

 

🧐  구현방법

사용자의 입력을 실시간으로 반영하지않고 타자를 연달아 치다가 멈춘 시점에 API 요청을 보낸다고 생각하면 된다.

useEffect로 query(사용자가 input에 입력한 값) 상태값이 변경될 때마다 setTimeout() 함수를 사용하여 1000ms의 지연 시간을 두고  debouncing(지연 시킨 검색어를 담은 값)상태값에 변경된 값을 업데이트 시켜준다. 그리고 만약 지정한 시간(1000ms)이 경과하기 전에 다시 사용자가 검색어를 입력하면 이전에 호출한 예약은 취소한다.

데이터 검색을 불러오는 fetchCountries()가 있는 useEffect에는 debouncing 상태값을 의존성으로 걸어주면 된다.

 // fetchCountries 함수
 export async function fetchCountries(query) {
   await new Promise((resolve) => setTimeout(resolve, 2000));
   return countries.filter(
     (country) =>
     country.en.toLowerCase().includes(query.toLowerCase()) ||
     country.ko.toLowerCase().includes(query.toLowerCase())
   );
 }

const Debounce = () => {
  const [query, setQuery] = useState("");
  const [countries, setCountries] = useState([]);
  const [isSearching, setIsSearching] = useState(false);
  const [debouncedQuery, setDebouncedQuery] = useState(query);

  // Debounce 적용
  useEffect(() => {
    const timeout = setTimeout(() => {
      setDebouncedQuery(query);
    }, 1000);
    return () => clearTimeout(timeout);
  }, [query]);

  // 데이터 받아오기
  useEffect(() => {
    setIsSearching(true);
    fetchCountries(debouncedQuery).then((countries) => {
      setCountries(countries);
      setIsSearching(false);
    });
  }, [debouncedQuery]);

  return (
    <>
		// ...
    </>
  );
};

export default Debounce;

 

🙌  결과

이제 더는 사용자의 입력값이 실시간으로 요청되지 않는다. 

(참고로 lodash같은 라이브러리에는 이미 메서드로 구현되어있다고 하니 라이브러리를 활용하는 것도 방법이다.)

적용결과

 

---

참고

[블로그] 쓰로틀링과 디바운싱 - 제로초(링크)

[블로그] React로 검색 UI 구현하기 (+ Debounce) - DaleSeo(링크)

 

💬 본 포스팅은 공부 기록용으로 정확하지 않은 정보가 존재할 수 있습니다. 발견하신다면 알려주세요!