본문으로 건너뛰기

FocusManager

FocusManager는 TanStack Query 내의 포커스 상태를 관리합니다.

기본 이벤트 리스너를 변경하거나 포커스 상태를 수동으로 변경하는 데 사용할 수 있습니다.

사용 가능한 메서드는 다음과 같습니다:

focusManager.setEventListener​

setEventListener를 사용하여 사용자 지정 이벤트 리스너를 설정할 수 있습니다:

import { focusManager } from '@tanstack/react-query'

focusManager.setEventListener((handleFocus) => {
  // Listen to visibilitychange
  if (typeof window !== 'undefined' && window.addEventListener) {
    window.addEventListener('visibilitychange', handleFocus, false)
  }

  return () => {
    // Be sure to unsubscribe if a new handler is set
    window.removeEventListener('visibilitychange', handleFocus)
  }
})

focusManager.subscribe​

subscribe를 사용해 가시성 상태의 변경 사항을 구독할 수 있습니다. 구독 해제 함수를 반환합니다:

import { focusManager } from '@tanstack/react-query'

const unsubscribe = focusManager.subscribe((isVisible) => {
  console.log('isVisible', isVisible)
})

focusManager.setFocused​

setFocused를 사용하여 포커스 상태를 수동으로 설정할 수 있습니다. 기본 포커스 검사로 돌아가려면 undefined로 설정합니다.

import { focusManager } from '@tanstack/react-query'

// Set focused
focusManager.setFocused(true)

// Set unfocused
focusManager.setFocused(false)

// Fallback to the default focus check
focusManager.setFocused(undefined)

옵션

  • focused: boolean | undefined

focusManager.isFocused​

isFocused를 사용하여 현재 포커스 상태를 가져올 수 있습니다.

const isFocused = focusManager.isFocused()