본문으로 건너뛰기

Devtools

Link, 이 검을 가져가세요... 아니, Devtools를 가져가세요!... 여정을 돕기 위해서요!

TanStack Router에는 전용 devtools가 있으니 손을 흔들며 환호성을 질러보세요! 🥳

TanStack Router 여정을 시작할 때 이 devtools가 곁에 있으면 좋습니다. TanStack Router의 내부 동작을 시각화해 주므로 곤란한 상황에서 디버깅 시간을 몇 시간이나 줄여줄 수 있습니다.

설치​

devtools는 별도로 설치해야 하는 패키지입니다.

react: @tanstack/react-router-devtools solid: @tanstack/solid-router-devtools

Devtools 가져오기​

React

import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'

Solid

import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

프로덕션에서 Devtools 사용​

Devtools를 TanStackRouterDevtools로 가져오면 프로덕션에서 표시되지 않습니다. process.env.NODE_ENV === 'production' 환경에서 devtools를 사용하려면 동일한 옵션을 모두 제공하는 TanStackRouterDevtoolsInProd를 대신 사용합니다.

React

import { TanStackRouterDevtoolsInProd } from '@tanstack/react-router-devtools'

Solid

import { TanStackRouterDevtoolsInProd } from '@tanstack/solid-router-devtools'

루트 라우트에서 Devtools 사용​

devtools가 작동하도록 하는 가장 쉬운 방법은 루트 라우트(또는 다른 라우트) 내부에서 렌더링하는 것입니다. 그러면 devtools가 라우터 인스턴스에 자동으로 연결됩니다.

React

src/routes/__root.tsx
import { createRootRoute, Outlet } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'

export const Route = createRootRoute({
  component: () => (
    <>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})

Solid

src/routes/__root.tsx
import { createRootRoute, Outlet } from '@tanstack/solid-router'
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

export const Route = createRootRoute({
  component: () => (
    <>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})

라우터 인스턴스를 수동으로 전달​

RouterProvider 내부에서 devtools를 렌더링하는 방식이 적합하지 않다면 devtools의 router prop에 동일한 router 인스턴스를 지정할 수 있으며, 이 인스턴스는 Router 컴포넌트에 전달한 것입니다. 따라서 프로바이더 내부뿐 아니라 페이지 어디에나 devtools를 배치할 수 있습니다.

React

function App() {
  return (
    <>
      <RouterProvider router={router} />
      <TanStackRouterDevtools router={router} />
    </>
  )
}

Solid

function App() {
  return (
    <>
      <RouterProvider router={router} />
      <TanStackRouterDevtools router={router} />
    </>
  )
}

플로팅 모드​

플로팅 모드는 앱에 devtools를 고정된 플로팅 요소로 마운트하고, 화면 모서리에 devtools를 표시하거나 숨기는 토글을 제공합니다. 이 토글 상태는 localStorage에 저장되며 다시 로드해도 유지됩니다.

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

React

function App() {
  return (
    <>
      <RouterProvider router={router} />
      <TanStackRouterDevtools initialIsOpen={false} />
    </>
  )
}

Solid

function App() {
  return (
    <>
      <RouterProvider router={router} />
      <TanStackRouterDevtools initialIsOpen={false} />
    </>
  )
}

Devtools 옵션​

  • router: Router
    • 연결할 라우터 인스턴스입니다.
  • initialIsOpen: Boolean
    • devtools가 기본적으로 열리도록 하려면 true로 설정합니다.
  • panelProps: PropsObject
    • 패널에 props를 추가할 때 사용합니다. 예를 들어 className, style(기본 스타일을 병합하고 재정의) 등을 추가할 수 있습니다.
  • closeButtonProps: PropsObject
    • 닫기 버튼에 props를 추가할 때 사용합니다. 예를 들어 className, style(기본 스타일을 병합하고 재정의), onClick(기본 핸들러 확장) 등을 추가할 수 있습니다.
  • toggleButtonProps: PropsObject
    • 토글 버튼에 props를 추가할 때 사용합니다. 예를 들어 className, style(기본 스타일을 병합하고 재정의), onClick(기본 핸들러 확장) 등을 추가할 수 있습니다.
  • position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
    • 기본값은 bottom-left입니다.
    • devtools 패널을 열고 닫는 TanStack Router 로고의 위치입니다.
  • shadowDOMTarget?: ShadowRoot
    • devtools의 Shadow DOM 대상을 지정합니다.
    • 기본적으로 devtool 스타일은 주 문서의 <head> 태그(light DOM)에 적용됩니다. shadowDOMTarget을 제공하면 대신 이 Shadow DOM 내부에 스타일을 적용합니다.
  • containerElement?: string | any
    • 접근성 목적에 따라 다른 유형의 컨테이너 요소 내부에서 devtools를 렌더링할 때 사용합니다.
    • 유효한 고유 JSX 요소에 해당하는 문자열을 사용할 수 있습니다.
    • 기본값은 'footer'입니다.

고정 모드​

devtools의 위치를 제어하려면 TanStackRouterDevtoolsPanel을 가져옵니다.

React

import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'

Solid

import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'

그런 다음 제공된 shadow DOM 대상에 연결할 수 있습니다.

React

<TanStackRouterDevtoolsPanel
  shadowDOMTarget={shadowContainer}
  router={router}
/>

Solid

<TanStackRouterDevtoolsPanel
  shadowDOMTarget={shadowContainer}
  router={router}
/>

StackBlitz에서 실제 예시를 보려면 여기를 클릭합니다.

임베디드 모드​

임베디드 모드는 devtools를 애플리케이션의 일반 컴포넌트로 삽입합니다. 이후 원하는 방식으로 스타일을 지정할 수 있습니다.

React

import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'

function App() {
  return (
    <>
      <RouterProvider router={router} />
      <TanStackRouterDevtoolsPanel
        router={router}
        style={styles}
        className={className}
      />
    </>
  )
}

Solid

import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'

function App() {
  return (
    <>
      <RouterProvider router={router} />
      <TanStackRouterDevtoolsPanel
        router={router}
        style={styles}
        class={className}
      />
    </>
  )
}

DevtoolsPanel 옵션​

  • router: Router
    • 연결할 라우터 인스턴스입니다.

React

  • style?: StyleObject
    • 인라인 스타일로 컴포넌트의 스타일을 지정할 때 사용하는 표준 React style 객체입니다.
  • className?: string
    • 클래스로 컴포넌트의 스타일을 지정할 때 사용하는 표준 React className 속성입니다.

Solid

  • style?: StyleObject
    • 인라인 스타일로 컴포넌트의 스타일을 지정할 때 사용하는 표준 Solid style 객체입니다.
  • class?: string
    • 클래스로 컴포넌트의 스타일을 지정할 때 사용하는 표준 Solid class 속성입니다.
  • isOpen?: boolean
    • 패널이 열려 있는지 닫혀 있는지 나타내는 불리언 변수입니다.
  • setIsOpen?: (isOpen: boolean) => void
    • 패널의 열림 및 닫힘 상태를 전환하는 함수입니다.
  • handleDragStart?: (e: any) => void
    • devtools 패널의 열기와 닫기를 처리합니다.
  • shadowDOMTarget?: ShadowRoot
    • devtools의 Shadow DOM 대상을 지정합니다.
    • 기본적으로 devtool 스타일은 주 문서의 <head> 태그(light DOM)에 적용됩니다. shadowDOMTarget을 제공하면 대신 이 Shadow DOM 내부에 스타일을 적용합니다.