[JavaScript] Debounce(디바운스)와 Throttle(쓰로틀)

이번 포스팅은 검색어 조회 프로젝트를 하면서  알게 된 디바운스와 쓰로틀링을 포스팅하려고 한다. 

 

Throttle과 Debounce는 자주 사용 되는 이벤트나 함수들의 실행되는 빈도를 줄여서, 성능 상의 유리함을 가져오기 위한 개념이다.

둘은 비슷한 기능이지만 차이점이 있는데 이번 포스팅은 이들의 개념과 어떨 때 쓰이는지, 그리고 차이점에 대해 알아보려고 한다.  

---

Debounce(디바운스)란? 

• 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
• 보통 검색어 기능에 자주 쓰인다. 

 

 

Debounce는 여러 번 발생하는 이벤트에서, 가장 마지막 이벤트 만을 실행되도록 만드는 개념이다.

👉🏻 예를 들어 ~  입력이 끝난 500ms 동안 동일한 이벤트가 계속해서 발생 한다면, 입력이 끝날 때, 가장 마지막 이벤트만을 실행하여, 성능성 유리함을 가져올 수 있다!

 

❗️Throttle과 다른 점은, 마지막 이벤트에서 일정 시간 동안 이벤트가 발생한다면, 또 일정 시간을 기다린다는 점이다.

 

 

실제 프로젝트에서 구현한 코드

import { useState, useEffect } from "react";

//value는 실행하는 곳에서 보내준 인풋 값이다.보내준걸 매개변수로 보내줌.
// delay는 0.3초 설정
const useDebounce = (value, delay = 300) => {
  const [debounce, setDebounce] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebounce(value);
    }, delay); // setDebounce의 밸류값이 바뀌면 0.3초 딜레이 시켜라
    return () => {
      clearTimeout(handler); // 0.3초가 지났을때 다시 불러와라
    };
  }, [value, delay]); // 인풋이 바뀔때 마다 이펙트 실행.
  return debounce;
};
export default useDebounce;

보통 사람들은 타자를 연달아 친다. 중간에 잠시 몇 초 쉴 수는 있겠지만 대부분 한 번에 검색어를 입력한다.

🖐🏻 따라서 입력이 다 끝난 후에 요청을 보내면 된다. 나는 300ms로 설정을 해뒀다. 

❗️즉 타자를 칠 때(input 이벤트 발생)마다 타이머를 설정한다. 300ms동안 입력이 없으면 입력이 끝난 것으로 친다.
(시간은 적당히 설정하면 된다!)

---

 

아래 예시는 "가방" 을 검색했을 때 API요청을 얼마나 하는지 알려주는 네트워크    

 

디바운싱 X

 

디바운싱 O

 

---

Throttle(쓰로틀)이란? 

 

• 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
• 보통 스크롤 이벤트(스크롤을 올리거나 내릴 때)에서 자주 사용 

 

 

Throttle 은 여러 번 발생하는 이벤트를 일정 시간 동안, 한 번만 실행되도록 만드는 개념이다. 

 

실행 횟수에 제한을 거는 것이 특징!

 

👉🏻예를 들어 ~ 500ms 동안 이벤트 실행을 막고, 한번만 실행하기 때문에, 잦은 이벤트 발생을 막아 성능상의 유리함을 가져올 수 있다.

 

❗️Debounce 와 다른 점은 이벤트 발생 시간 이후에 일정 시간 동안 만을 기다리고, 이벤트를 실행 후 재차 기다린 다는 점이다.

 

---

Debounce와 Throttle의 차이점?

 

Debounce와 Throttle의 차이점은 이벤트를 언제 발생시킬지의 시점 차이이다.

Debounce는 입력이 끝날 때까지 무한적으로 기다리지만, Throttle는 입력이 시작되면, 일정 주기로 계속 실행한다.

Debounce의 시간을 짧게 가져간다면, Throttle과 비슷한 효과가 날 수 있지만, 그럼에도 시점에서 차이가 날 수 있다.

 

❗️때문에, 작업물의 성격에 따라 사용방법이 달라질 수 있다.

 

---

라이브러리

 

https://github.com/niksy/throttle-debounce

GitHub - niksy/throttle-debounce: Throttle and debounce functions.

 

위 라이브러리를 이용하면, 매우 쉽게 throttle와 debounce 개념을 사용할 수 있다고 한다!

이 외에도 다른 라이브러리들이 있지만 다음에 한번 사용해봐야겠다.  

 

 

 

 

 

참고

https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa

https://pks2974.medium.com/throttle-와-debounce-개념-정리하기-2335a9c426ff