use-debounce (feat: Next.js, Debouncing) 알아보기

공식문서 참고

웹 애플리케이션에서 사용자 입력에 따라 실시간으로 데이터를 조회하거나 필터링해야 하는 경우가 많다.
예를 들어, 검색 창에 키워드를 입력하면 그에 맞는 결과를 실시간으로 보여주는 기능이 그렇다.
하.지.만 이때 발생할 수 있는 문제 중 하나는 사용자가 입력할 때마다 너무 많은 요청이 서버로 전송될 수 있다는 점이다.
이로 인해 서버 부하가 증가하고, 애플리케이션 성능이 저하될 수 있다. 이를 해결하기 위한 방법 중 하나가 디바운싱(Debouncing)이다.

그래서 디바운싱(Debouncing)이 뭔데

디바운싱은 연속적인 이벤트가 발생할 때, 마지막 이벤트가 발생한 후 일정 시간 동안 추가 이벤트가 발생하지 않을 때에만 특정 작업을 수행하는 프로그래밍 기법이다.

그니까 유저가 '박지성'을 검색했을때 'ㅂ ㅏ ㄱ ㅈ ㅣ ㅅ ㅓ ㅇ' 이렇게 총 8번 이벤트가 발생하는걸 막고 딱 '박지성'을 모두 입력했을 때!!! 한번 이벤트가 발생하게 하는것!

불필요한 서버 요청을 줄이고, 애플리케이션 성능을 최적화할 수 있다.

내친김에 디바운싱의 동작 원리까지 먹어버리자

1. 이벤트 발생: 사용자가 검색 창에 키워드를 입력하면 디바운스 타이머가 시~작.
2. 대기: 사용자가 계속해서 키워드를 입력하면 타이머가 리셋!
3. 실행: 사용자가 일정 시간(예: 300ms-> 0.3초) 동안 입력을 멈추면, 비로소 디바운스된 함수가 실행!

이 과정에서 디바운싱은 이벤트 발생 빈도를 조절함으로써 불필요한 서버 요청을 줄이는 역할을 한다.

공식문서 예시코드

/app/ui/search.tsx

function handleSearch(term: string) {
  console.log(`Searching... ${term}`);
 
  const params = new URLSearchParams(searchParams);
  if (term) {
    params.set('query', term);
  } else {
    params.delete('query');
  }
  replace(`${pathname}?${params.toString()}`);
}

Dev Tools Console결과

Searching... E
Searching... Em
Searching... Emi
Searching... Emil

현재 입력할 때마다 URL이 업데이트되고 있으며, 따라서 매번 데이터베이스에 쿼리를 보내고 있다! 이 작업이 작은 애플리케이션에서는 문제가 되지 않지만, 수천 명의 사용자가 있는 애플리케이션에서는 각 사용자가 입력할 때마다 데이터베이스에 새로운 요청을 보내게 된다. 요청이 줘 터진다.

• *디바운싱(Debouncing)**은 함수가 실행되는 빈도를 제한하는 프로그래밍 기법이. 이 경우, 줘 터지기 싫기 때문에 사용자가 입력을 멈췄을 때만 데이터베이스에 쿼리를 보내고 싶다.

디바운싱(Debouncing)의 동작 원리 원모타임

1. 이벤트 트리거: 디바운싱을 적용해야 할 이벤트(예: 검색 상자에 키 입력)가 발생하면 타이머가 시작
2. 대기: 타이머가 종료되기 전에 새로운 이벤트가 발생하면 타이머가 초기화
3. 실행: 타이머가 끝나면 디바운싱된 함수가 비로소 실행!!

디바운싱을 구현하는 방법은 여러 가지가 있지만, 간단하게 하기 위해 use-debounce라는 라이브러리를 사용할 것이다.

use-debounce 설치:

pnpm i use-debounce

컴포넌트에서 useDebouncedCallback 함수 가져오기:

/app/ui/search.tsx

// ...
import { useDebouncedCallback } from 'use-debounce';
 
// Search 컴포넌트 안에...
const handleSearch = useDebouncedCallback((term) => {
  console.log(`Searching... ${term}`);
 
  const params = new URLSearchParams(searchParams);
  if (term) {
    params.set('query', term);
  } else {
    params.delete('query');
  }
  replace(`${pathname}?${params.toString()}`);
}, 300);

이 함수는 handleSearch 함수의 내용을 감싸며, 사용자가 입력을 멈춘 후 일정 시간(여기서는 300ms)이 지나면 코드가 실행된다.

이제 검색 창에 다시 입력하고 개발자 도구의 콘솔을 열어보면 다음과 같은 결과를 확인할 수 있다.

Searching... Emil

Wow..

레이아웃 이쁘게 잡고 뿌듯해 하는게 프론트 엔지니어가 아니다. 이런 리소스 절약이야말로 프론트 개발자의 중요한 역량이라고 생각한다.
디바운싱을 사용하면 데이터베이스로 보내는 요청의 수를 줄일 수 있어 리소스를 절약할 수 있다.