FocusManager

FocusManager는 TanStack Query에서 포커스 상태를 관리하는 도구입니다.

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

사용할 수 있는 메서드는 다음과 같습니다:

`focusManager.setEventListener`

setEventListener는 커스텀 이벤트 리스너를 설정하는 데 사용할 수 있습니다:

import { focusManager } from "@tanstack/react-query";
 
focusManager.setEventListener((handleFocus) => {
  // visibilitychange 이벤트를 구독합니다.
  if (typeof window !== "undefined" && window.addEventListener) {
    window.addEventListener("visibilitychange", handleFocus, false);
  }
 
  return () => {
    // 새로운 핸들러가 설정되면 기존 핸들러의 구독을 해제합니다.
    window.removeEventListener("visibilitychange", handleFocus);
  };
});

`focusManager.subscribe`

subscribe는 visibility 상태의 변경 사항을 구독하는 데 사용할 수 있습니다. 이 함수는 구독 해제 함수를 반환합니다:

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";
 
// 포커스 상태로 설정
focusManager.setFocused(true);
 
// 포커스 해제 상태로 설정
focusManager.setFocused(false);
 
// 기본 포커스 확인으로 돌아가기
focusManager.setFocused(undefined);

Options

focused: boolean | undefined

`focusManager.isFocused`

isFocused는 현재 포커스 상태를 가져오는 데 사용할 수 있습니다.

const isFocused = focusManager.isFocused();

Changed History

2024.10.02. @ubinquitous

[주석] 이벤트를 듣습니다 → 이벤트를 구독합니다

QueriesObserver onlineManager