본문으로 건너뛰기

자주 묻는 질문

TanStack Router FAQ에 오신 것을 환영합니다! 여기에서 TanStack Router에 대한 일반적인 질문의 답변을 확인할 수 있습니다. 여기에서 답을 찾지 못한 질문이 있다면 TanStack Discord에서 질문할 수 있습니다.

다른 라우터보다 TanStack Router를 선택해야 하는 이유는 무엇인가요?​

이 질문에 답하려면 먼저 다른 선택지를 살펴보는 것이 중요합니다. 선택할 수 있는 대안은 많지만, 널리 사용되고 활발하게 유지 관리되는 것은 몇 가지뿐입니다.

  • Next.js - 새 React 프로젝트를 시작하는 데 선도적인 프레임워크로 널리 여겨집니다. 성능, 개발 워크플로, 최첨단 기술에 중점을 두고 설계되었습니다. 프레임워크의 API와 추상화는 강력하지만 때로는 비표준적으로 느껴질 수 있습니다. 빠른 성장과 업계의 도입으로 기능이 풍부해졌지만, 학습 곡선이 더 가파르고 오버헤드가 증가하기도 합니다.
  • Remix / React Router - 역사적으로 성공한 React Router를 기반으로 하는 Remix는 강력한 개발자 및 사용자 경험을 제공합니다. API와 아키텍처 비전은 Request/Response와 같은 웹 표준에 확고히 기반하며, 다양한 JavaScript 환경에 적응하는 데 중점을 둡니다. 많은 API와 추상화가 잘 설계되어 TanStack Router의 여러 API에 영향을 주었습니다. 그러나 경직된 설계, 추가 기능으로 통합되는 타입 안전성, 플랫폼 API를 엄격하게 따르는 경우가 일부 개발자에게는 제약이 될 수 있습니다.

이러한 프레임워크와 라우터는 각자의 장점이 있지만 모든 프로젝트의 요구 사항에 맞지는 않을 수 있는 트레이드오프도 있습니다. TanStack Router는 유연성이나 성능을 희생하지 않으면서 개발자 경험을 개선하도록 설계된 라우팅 API를 제공해 균형을 이루는 것을 목표로 합니다.

TanStack Router는 프레임워크인가요?​

TanStack Router 자체는 일반적인 의미의 "프레임워크"가 아닙니다. 몇 가지 일반적인 풀스택 요구 사항을 다루지 않기 때문입니다. 하지만 TanStack Router는 번들링, 배포, 서버 전용 기능을 다루는 다른 도구와 함께 사용하면 풀스택 프레임워크로 확장할 수 있도록 설계되었습니다. 이것이 TanStack Router와 Vite를 기반으로 구축된 풀스택 프레임워크인 TanStack Start를 현재 개발하고 있는 이유입니다. TanStack Router의 역사를 더 자세히 알아보려면 TanStack Router의 역사를 읽습니다.

routeTree.gen.ts 파일을 git에 커밋해야 하나요?​

예! 라우트 트리 파일(즉, routeTree.gen.ts)은 TanStack Router가 생성하지만 본질적으로 빌드 산출물이 아니라 애플리케이션 런타임의 일부입니다. 라우트 트리 파일은 애플리케이션 소스 코드의 중요한 부분이며, TanStack Router가 런타임에 애플리케이션의 라우트를 빌드하는 데 사용합니다.

다른 개발자가 애플리케이션을 빌드할 수 있도록 이 파일을 git에 커밋해야 합니다.

루트 라우트 컴포넌트를 조건부로 렌더링할 수 있나요?​

아니요. 루트 라우트는 애플리케이션의 진입점이므로 항상 렌더링됩니다. 라우트의 컴포넌트를 조건부로 렌더링해야 한다면 일반적으로 어떤 조건(예: 사용자 인증)에 따라 페이지 콘텐츠가 달라져야 한다는 의미입니다. 이 경우 레이아웃 라우트 또는 경로 없는 레이아웃 라우트를 사용해 콘텐츠를 조건부로 렌더링해야 합니다.

라우트의 beforeLoad 함수에서 조건부 검사를 사용해 이러한 라우트에 대한 액세스를 제한할 수 있습니다.

어떻게 보이나요?

React

// src/routes/_pathless-layout.tsx
import { createFileRoute, Outlet } from '@tanstack/react-router'
import { isAuthenticated } from '../utils/auth'

export const Route = createFileRoute('/_pathless-layout', {
  beforeLoad: async () => {
    // Check if the user is authenticated
    const authed = await isAuthenticated()
    if (!authed) {
      // Redirect the user to the login page
      return '/login'
    }
  },
  component: PathlessLayoutRouteComponent,
  // ...
})

function PathlessLayoutRouteComponent() {
  return (
    <div>
      <h1>You are authed</h1>
      <Outlet />
    </div>
  )
}

Solid

// src/routes/_pathless-layout.tsx
import { createFileRoute, Outlet } from '@tanstack/solid-router'
import { isAuthenticated } from '../utils/auth'

export const Route = createFileRoute('/_pathless-layout', {
  beforeLoad: async () => {
    // Check if the user is authenticated
    const authed = await isAuthenticated()
    if (!authed) {
      // Redirect the user to the login page
      return '/login'
    }
  },
  component: PathlessLayoutRouteComponent,
  // ...
})

function PathlessLayoutRouteComponent() {
  return (
    <div>
      <h1>You are authed</h1>
      <Outlet />
    </div>
  )
}