🔥 윈도우 포커스 시 데이터 다시 가져오기

359자
4분

TanStack Query는 사용자 경험을 향상시키기 위해 윈도우 포커스 이벤트를 활용합니다. 사용자가 애플리케이션을 떠났다가 다시 돌아왔을 때, 쿼리 데이터가 오래되었다면 TanStack Query가 자동으로 최신 데이터를 가져옵니다. 이 기능은 전역적으로 또는 개별 쿼리별로 설정할 수 있습니다.

전역 설정 비활성화

전체 애플리케이션에서 윈도우 포커스 시 데이터를 다시 가져오는 기능을 끄고 싶다면, QueryClient를 생성할 때 기본 옵션을 설정하면 됩니다. 다음은 그 예제입니다:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false, // 기본값은 true입니다
    },
  },
})
 
function App() {
  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
}
 
typescript

개별 쿼리 설정 비활성화

특정 쿼리에 대해서만 이 기능을 끄고 싶다면, useQuery 훅을 사용할 때 옵션을 지정할 수 있습니다:

useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos,
  refetchOnWindowFocus: false,
})
 
typescript

사용자 정의 윈도우 포커스 이벤트

때로는 TanStack Query가 데이터를 다시 가져오게 만드는 윈도우 포커스 이벤트를 직접 관리하고 싶을 수 있습니다. 이를 위해 TanStack Query는 focusManager.setEventListener 함수를 제공합니다. 이 함수를 사용하면 윈도우이 포커스를 받았을 때 실행할 콜백을 설정할 수 있습니다.

focusManager.setEventListener를 호출하면 이전에 설정된 핸들러(대부분의 경우 기본 핸들러)가 제거되고 새로운 핸들러가 사용됩니다. 다음은 기본 핸들러의 예제입니다:

focusManager.setEventListener((handleFocus) => {
  // visibilitychange 이벤트 감지
  if (typeof window !== 'undefined' && window.addEventListener) {
    const visibilitychangeHandler = () => {
      handleFocus(document.visibilityState === 'visible')
    }
    window.addEventListener('visibilitychange', visibilitychangeHandler, false)
    return () => {
      // 새로운 핸들러가 설정되면 이전 이벤트 리스너 제거
      window.removeEventListener('visibilitychange', visibilitychangeHandler)
    }
  }
})
 
typescript

React Native에서 포커스 관리하기

React Native 환경에서는 윈도우 이벤트 대신 AppState 모듈을 통해 포커스 정보를 얻을 수 있습니다. AppState의 "change" 이벤트를 사용하여 앱 상태가 "active"로 변경될 때 업데이트를 트리거할 수 있습니다:

import { AppState } from 'react-native'
import { focusManager } from '@tanstack/react-query'
 
function onAppStateChange(status: AppStateStatus) {
  if (Platform.OS !== 'web') {
    focusManager.setFocused(status === 'active')
  }
}
 
useEffect(() => {
  const subscription = AppState.addEventListener('change', onAppStateChange)
 
  return () => subscription.remove()
}, [])
 
typescript

포커스 상태 관리하기

TanStack Query는 포커스 상태를 직접 제어할 수 있는 방법도 제공합니다:

import { focusManager } from '@tanstack/react-query'
 
// 기본 포커스 상태 덮어쓰기
focusManager.setFocused(true)
 
// 기본 포커스 확인으로 돌아가기
focusManager.setFocused(undefined)
 
typescript

이렇게 TanStack Query의 윈도우 포커스 관련 기능을 활용하면 사용자에게 항상 최신 데이터를 제공하면서도 불필요한 네트워크 요청을 줄일 수 있습니다. 개발자는 이 기능을 적절히 조절하여 애플리케이션의 성능과 사용자 경험을 최적화할 수 있습니다.