본문으로 건너뛰기

빠른 시작

설치​

아직 TanStack Pacer를 설치하지 않았다면 설치 페이지의 안내를 참고합니다.

어떤 유틸리티가 필요한가요?​

디바운서, 스로틀러, 요청률 제한기, 큐 처리기, 배처 중 무엇이 필요한지 확실하지 않다면 어떤 Pacer 유틸리티를 선택해야 하나요?부터 살펴봅니다. 다섯 유틸리티를 모두 비교하고 각각의 동기, 비동기, 프레임워크별 변형을 설명합니다.

API 레퍼런스​

각 유틸리티의 전체 API는 API 레퍼런스 페이지를 참고합니다.

기본 사용법​

바닐라 JavaScript에서는 코어 Pacer 패키지의 클래스와 함수를 직접 사용합니다.

클래스 사용법​

import { Debouncer } from '@tanstack/pacer' // class

const debouncer = new Debouncer(fn, options)

debouncer.maybeExecute(args) // execute the debounced function
debouncer.cancel() // cancel the debounced function
debouncer.flush() // flush the debounced function

함수 사용법​

import { debounce } from '@tanstack/pacer' // function

const debouncedFn = debounce(fn, options)

debouncedFn(args) // execute the debounced function

React 같은 프레임워크 어댑터에서는 useDebouncer 훅이 디바운스된 함수를 생성하고 컴포넌트 생명주기에 맞춰 정리합니다.

import { useDebouncer } from '@tanstack/react-pacer'

const debouncer = useDebouncer(fn, options) // recommended

debouncer.maybeExecute(args) // execute the debounced function
debouncer.cancel() // cancel the debounced function
debouncer.flush() // flush the debounced function

옵션 헬퍼​

각 유틸리티는 완전한 타입 검사와 함께 공유 옵션을 정의하는 옵션 헬퍼를 제공하므로 여러 인스턴스에서 재사용할 수 있습니다.

import { debouncerOptions } from '@tanstack/pacer'

const commonDebouncerOptions = debouncerOptions({
  wait: 1000,
  leading: false,
  trailing: true,
})

const debouncer = new Debouncer(fn, { ...commonDebouncerOptions, key: 'myDebouncer' })

Provider​

각 프레임워크 어댑터에는 유틸리티의 모든 인스턴스에 기본 옵션을 설정하는 Provider 컴포넌트가 있습니다.

import { PacerProvider } from '@tanstack/react-pacer'

// set default options for react-pacer instances
<PacerProvider defaultOptions={{ debouncer: { wait: 1000 } }}>
  <App />
</PacerProvider>

Devtools​

각 프레임워크 어댑터는 공식 TanStack Devtools 통합을 제공합니다. 설정 방법은 Devtools 페이지를 참고합니다.