TanStack Router에서 Chakra 사용하기

TanStack Router에서 Chakra 사용하기 (Using Chakra in TanStack Router)

TanStack Router 프로젝트에 Chakra UI를 설치하는 방법을 안내하는 가이드예요. TanStack Router의 파일 기반 라우팅과 Chakra UI의 스니펫·원시 컴포넌트를 함께 사용해 더 빠르게 UI를 구축할 수 있습니다.

출처: 문서

본문

템플릿 (Templates)

빠르게 시작하려면 아래 TanStack Router 템플릿을 사용하세요.

설치 (Installation)

최소 Node 버전은 Node.20.x입니다.

새 프로젝트 만들기 (Create a new project)

TanStack Router Vite 템플릿으로 새 프로젝트를 만들거나, 기존 Vite 프로젝트에 TanStack Router를 추가하세요.

npm create vite@latest my-app -- --template react-ts
cd my-app

의존성 설치 (Install dependencies)

npm i @chakra-ui/react @emotion/react @tanstack/react-router
npm i -D @tanstack/router-plugin @tanstack/router-devtools

스니펫 추가 (Add snippets)

스니펫은 UI를 더 빨리 구축하는 데 사용할 수 있는 사전 빌드된 컴포넌트예요. @chakra-ui/cli를 사용해 스니펫을 프로젝트에 추가할 수 있습니다.

npx @chakra-ui/cli snippet add

tsconfig 업데이트 (Update tsconfig)

TypeScript를 사용한다면 tsconfig.app.json 파일의 compilerOptions에 다음이 포함되도록 확인하세요.

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "skipLibCheck": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Vite 설정 (Setup Vite config)

TanStack Router Vite 플러그인을 추가하고 tsconfig 경로 해석을 활성화하세요.

import { tanstackRouter } from "@tanstack/router-plugin/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [tanstackRouter({ autoCodeSplitting: true }), react()],
  resolve: {
    tsconfigPaths: true,
  },
})

Vite 7 이하를 사용한다면 resolve.tsconfigPaths 대신 vite-tsconfig-paths 플러그인을 설치하세요.

npm i -D vite-tsconfig-paths

import tsconfigPaths from "vite-tsconfig-paths"

export default defineConfig({
  plugins: [
    tanstackRouter({ autoCodeSplitting: true }),
    react(),
    tsconfigPaths(),
  ],
})

루트 라우트 설정 (Setup root route)

애플리케이션을 Chakra Provider로 감싸는 루트 라우트를 만드세요.

import { Provider } from "@/components/ui/provider"
import { Outlet, createRootRoute } from "@tanstack/react-router"

export const Route = createRootRoute({
  component: RootComponent,
})

function RootComponent() {
  return (
    <Provider>
      <Outlet />
    </Provider>
  )
}

엔트리 포인트 설정 (Setup entry point)

라우터 인스턴스를 만들고 RouterProvider로 렌더링하세요.

import { RouterProvider, createRouter } from "@tanstack/react-router"
import React from "react"
import ReactDOM from "react-dom/client"
import { routeTree } from "./routeTree.gen"

const router = createRouter({ routeTree })

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router
  }
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

첫 번째 라우트 만들기 (Create your first route)

UI 구축을 시작할 파일 기반 라우트를 만드세요.

import { Button, HStack } from "@chakra-ui/react"
import { createFileRoute } from "@tanstack/react-router"

export const Route = createFileRoute("/")({
  component: HomePage,
})

function HomePage() {
  return (
    <HStack>
      <Button>Click me</Button>
      <Button>Click me</Button>
    </HStack>
  )
}

즐거운 개발 되세요! (Enjoy!)

Chakra UI의 스니펫과 원시 컴포넌트의 힘으로, TanStack Router의 파일 기반 라우팅과 함께 더 빠르게 UI를 구축할 수 있어요.

더 알아보기 (Learn more)