Docs
Getting Started
Overview

Overview

TanStack Router는 React 애플리케이션을 구축하기 위한 라우터입니다. 주요 기능은 다음과 같습니다:

  • 100% 추론 가능한 TypeScript 지원
  • 타입 안전한 내비게이션
  • 중첩 라우팅 및 레이아웃 라우트
  • SWR 캐싱이 포함된 내장 라우트 로더
  • 클라이언트 사이드 데이터 캐시(TanStack Query, SWR 등)를 위한 설계
  • 자동 라우트 사전 로드
  • 비동기식 라우트 요소와 에러 경계
  • 파일 기반 라우트 생성
  • 타입 안전한 JSON 기반 검색 매개변수 상태 관리 API
  • 경로 및 검색 매개변수 스키마 검증
  • 검색 매개변수 내비게이션 API
  • 사용자 정의 검색 매개변수 파서/직렬화 지원
  • 검색 매개변수 미들웨어
  • 라우트 매칭/로딩 미들웨어

빠르게 시작하려면 다음 페이지로 이동하세요. 더 긴 설명을 원한다면, 함께 자세히 살펴봅시다!

"A Fork in the Route"

애플리케이션을 구축할 때 라우터를 사용하는 것은 필수적인 요소로 여겨지며, 일반적으로 기술 스택을 선택할 때 가장 먼저 고려하는 사항 중 하나입니다.

그렇다면, 왜 TanStack Router를 다른 라우터 대신 선택해야 할까요?

이 질문에 답하려면 현재 사용 가능한 다른 옵션들을 살펴볼 필요가 있습니다. 면밀히 조사해 보면 여러 가지가 있지만, 제 경험상 진지하게 탐색할 가치가 있는 것은 몇 가지뿐입니다:

  • Next.js - 새로운 React 프로젝트를 시작할 때 사실상 표준으로 여겨지는 프레임워크로, 성능, 워크플로우, 최첨단 기술에 중점을 둡니다. API와 추상화는 강력하지만, 때로는 비표준으로 보일 수 있습니다. 산업에서의 매우 빠른 성장과 채택으로 인해 기능이 풍부한 경험을 제공하지만, 때로는 압도적이거나 복잡하게 느껴질 수 있습니다.
  • Remix / React Router - 역사적으로 성공한 React Router를 기반으로 한 풀스택 프레임워크로, 웹 표준(Request/Response)과 JavaScript가 실행될 수 있는 모든 곳에서 작동하는 데 중점을 둔 강력한 개발자 및 사용자 경험을 제공합니다. 많은 API와 추상화는 훌륭하게 설계되었으며, TanStack Router API에 영감을 준 요소가 많습니다. 하지만, 엄격한 디자인, 부가적인 타입 안전성, 플랫폼 API에 대한 엄격한 준수가 일부 개발자들에게는 부족함으로 느껴질 수 있습니다.

이 두 프레임워크(및 라우터)는 훌륭하며, React 애플리케이션을 구축하는 데 매우 좋은 솔루션임을 개인적으로 보장할 수 있습니다. 그러나 제 경험상, 이러한 솔루션은 특히 실제 라우팅 API와 관련하여 개발자가 앱을 더 빠르고 쉽게 작업할 수 있도록 개선될 여지가 있다고 생각합니다.

라우터를 선택하는 것은 매우 중요하기 때문에, 종종 프레임워크 선택과 1:1로 연결되어 있다는 점은 아마 놀랍지 않을 것입니다. 대부분의 프레임워크는 특정 라우터에 의존하기 때문입니다.

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

TanStack Router 자체는 전통적인 의미에서 "프레임워크"가 아닙니다. 이는 일반적인 풀스택 문제를 몇 가지 다루지 않기 때문입니다. 그러나 TanStack Router는 번들링, 배포, 서버 사이드 기능을 다루는 도구와 함께 사용할 경우 풀스택 프레임워크로 업그레이드될 수 있도록 설계되었습니다. 이것이 바로 우리가 TanStack Router와 Vinxi, Nitro, Vite와 같은 도구를 기반으로 한 풀스택 프레임워크인 TanStack Start (opens in a new tab)를 개발 중인 이유입니다.

TanStack Router의 역사에 대한 더 깊은 내용을 알고 싶다면 TanStack Router's History를 참조하세요.

Why TanStack Router?

TanStack Router는 다른 라우터에서 기대할 수 있는 기본적인 기능을 제공합니다:

  • 중첩 라우트, 레이아웃 라우트, 그룹화된 라우트
  • 파일 기반 라우팅
  • 병렬 데이터 로딩
  • 사전 로드
  • URL 경로 매개변수
  • 에러 경계 및 처리
  • SSR
  • 라우트 마스킹

또한, 몇 가지 새로운 기능을 추가하여 수준을 한 단계 끌어올렸습니다:

  • 100% 추론 가능한 TypeScript 지원
  • 타입 안전한 내비게이션
  • 로더를 위한 내장 SWR 캐싱
  • 클라이언트 사이드 데이터 캐시(TanStack Query, SWR 등)를 위한 설계
  • 타입 안전한 JSON 기반 검색 매개변수 상태 관리 API
  • 경로 및 검색 매개변수 스키마 검증
  • 검색 매개변수 내비게이션 API
  • 사용자 정의 검색 매개변수 파서/직렬화 지원
  • 검색 매개변수 미들웨어
  • 상속된 라우트 컨텍스트
  • 파일 기반과 코드 기반 혼합 라우팅

이제 더 중요한 기능 몇 가지를 자세히 살펴보겠습니다!

100% Inferred TypeScript Support

요즘은 대부분의 패키지가 "TypeScript로 작성"되거나 최소한 런타임 기능에 대한 타입 정의를 제공하지만, 실제로 TypeScript를 염두에 두고 API를 설계한 패키지는 많지 않습니다. TanStack Router는 모든 경로와 구성에 대한 타입 정보를 완벽하게 추론하며, 타입 안전성을 바탕으로 개발 속도와 신뢰성을 높입니다.

1st Class Search Parameters

검색 매개변수는 종종 간과되며, 기존 솔루션에서는 타입 안전성을 제공하지 않습니다. TanStack Router는 강력한 파서/직렬화 기능을 제공하며, 검색 매개변수를 URL에서 바로 관리할 수 있는 기능을 제공합니다.

Built-In Caching and Friendly Data Loading

TanStack Router는 캐싱과 데이터 로딩에 대한 문제를 해결하기 위해 가벼운 내장 캐싱 레이어와 유연한 데이터 생명주기 API를 제공합니다.

Inherited Route Context

TanStack Router는 라우트별 컨텍스트를 정의할 수 있는 기능을 제공하며, 이를 통해 인증, 데이터 공유, 테마 설정 등 다양한 시나리오를 처리할 수 있습니다.

File-based and/or Code-Based Routing

파일 기반과 코드 기반 라우팅을 동시에 지원하여 프로젝트 요구 사항에 따라 최적의 방식을 선택할 수 있습니다.

Acknowledgements

TanStack Router는 다음과 같은 오픈 소스 프로젝트에서 영감을 받았습니다:

Let's go!

TanStack Router의 더 많은 기능을 활용해보세요. 다음 페이지로 이동하여 시작해봅시다!

Installation