리액트 쿼리 Devtools

React Query는 전용 개발 도구와 함께 제공되므로 손을 흔들고 만세를 외치세요! 🥳

React Query 여정을 시작할 때, 이 개발 도구들을 곁에 두고 싶을 것입니다. 이 도구들은 React Query의 모든 내부 작동을 시각화하는 데 도움이 되며, 문제가 생겼을 때 디버깅 시간을 절약할 수 있습니다!

개발자 도구 import 해오기

개발자 도구는 리액트 쿼리/개발 도구 패키지로 분할된 번들입니다. 추가로 설치할 필요 없이

import { ReactQueryDevtools } from 'react-query/devtools'

기본적으로 React Query Devtools는 process.env.NODE_ENV === '개발'일 때만 번들에 포함되므로 프로덕션 빌드 중에 제외하는 것에 대해 걱정할 필요가 없습니다.

플로팅 모드

플로팅 모드는 앱에서 개발 도구를 고정된 플로팅 요소로 마운트하고 화면 모서리에 토글을 제공하여 개발 도구를 표시하거나 숨길 수 있습니다. 이 토글 상태는 다시 로드할 때마다 localStorage에 저장되고 기억됩니다.

다음 코드를 React 앱에서 가능한 한 높은 위치에 배치하세요. 페이지의 루트에 가까울수록 더 잘 작동합니다!

import { ReactQueryDevtools } from 'react-query/devtools'

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* The rest of your application */}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

옵션

• 'initialIsOpen: Boolean'
  개발 도구가 기본적으로 열려 있도록 하려면 이 값을 true로 설정합니다.

• 'panelProps: PropsObject'
  패널에 props를 추가할 때 사용합니다. 예를 들어 클래스 이름, 스타일(병합 및 기본 스타일 재정의) 등을 추가할 수 있습니다.

-'closeButtonProps: PropsObject'
닫기 버튼에 props를 추가하는 데 사용합니다. 예를 들어 className, style(기본 스타일 병합 및 재정의), onClick(기본 핸들러 확장) 등을 추가할 수 있습니다.

• 'toggleButtonProps: PropsObject'
  토글 버튼에 props를 추가할 때 사용합니다. 예를 들어 className, style(병합 및 기본 스타일 재정의), onClick(기본 핸들러 확장) 등을 추가할 수 있습니다.

• "position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
  기본값은 왼쪽 하단입니다.
  개발자 도구 패널을 열고 닫는 React Query 로고의 위치입니다.

임베디드 모드

임베디드 모드는 애플리케이션의 일반 컴포넌트로서 devtools를 임베드합니다. 그 후에는 원하는 대로 스타일을 지정할 수 있습니다!

import { ReactQueryDevtoolsPanel } from 'react-query/devtools'

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* The rest of your application */}
      <ReactQueryDevtoolsPanel style={styles} className={className} />
    </QueryClientProvider>
  )
}

옵션
다음 옵션을 사용하여 개발 도구의 스타일을 지정합니다.

'style: StyleObject'
인라인 스타일로 컴포넌트의 스타일을 지정하는 데 사용되는 표준 React 스타일 객체입니다.

'className: string'
컴포넌트의 스타일을 class로 지정하는 데 사용되는 표준 React className 속성입니다.