개요
TanStack Router는 React 및 Solid 애플리케이션을 구축하기 위한 라우터입니다. 주요 기능은 다음과 같습니다.
- 100% 추론되는 TypeScript 지원
- 타입 안전 탐색
- 중첩 라우팅 및 레이아웃 라우트(경로 없는 레이아웃 포함)
- SWR 캐싱이 내장된 라우트 로더
- 클라이언트 측 데이터 캐시(TanStack Query, SWR 등)에 맞춘 설계
- 자동 라우트 프리페칭
- 비동기 라우트 요소 및 오류 경계
- 파일 기반 라우트 생성
- 타입 안전한 JSON 우선 검색 매개변수 상태 관리 API
- 경로 및 검색 매개변수 스키마 검증
- 검색 매개변수 탐색 API
- 사용자 지정 검색 매개변수 파서/직렬화기 지원
- 검색 매개변수 미들웨어
- 라우트 매칭/로딩 미들웨어
빠르게 시작하려면 다음 페이지로 이동합니다. 더 자세한 설명이 필요하다면 이어지는 내용을 살펴봅니다.
"라우트의 갈림길"
라우터를 사용해 애플리케이션을 구축하는 것은 필수 요소로 널리 여겨지며, 일반적으로 기술 스택에서 가장 먼저 선택하는 항목 중 하나입니다.
TanStack Router를 사용하는 이유
TanStack Router는 다른 라우터에서 기대하는 다음과 같은 기본 기능을 제공합니다.
- 중첩 라우트, 레이아웃 라우트, 그룹화된 라우트
- 파일 기반 라우팅
- 병렬 데이터 로딩
- 프리페칭
- URL 경로 매개변수
- 오류 경계 및 처리
- SSR
- 라우트 마스킹
또한 다음과 같이 기준을 높이는 새로운 기능도 제공합니다.
- 100% 추론되는 TypeScript 지원
- 타입 안전 탐색
- 로더를 위한 SWR 캐싱 내장
- 클라이언트 측 데이터 캐시(TanStack Query, SWR 등)에 맞춘 설계
- 타입 안전한 JSON 우선 검색 매개변수 상태 관리 API
- 경로 및 검색 매개변수 스키마 검증
- 검색 매개변수 탐색 API
- 사용자 지정 검색 매개변수 파서/직렬화기 지원
- 검색 매개변수 미들웨어
- 상속되는 라우트 컨텍스트
- 파일 기반 라우팅과 코드 기반 라우팅의 혼합
이제 더 중요한 기능 몇 가지를 자세히 살펴봅니다.
100% 추론되는 TypeScript 지원
요즘은 거의 모든 것이 “Typescript로” 작성되거나 최소한 런타임 기능 위에 타입 정의를 제공합니다. 하지만 생태계의 패키지 중 실제로 TypeScript를 고려해 API를 설계하는 경우는 많지 않습니다. 따라서 라우터가 옵션 필드를 자동 완성하고 일부 속성/메서드 오타를 찾아주는 것만으로도 유용하지만, 더 많은 이점을 얻을 수 있습니다.
- TanStack Router는 코드의 어느 지점에서든 모든 라우트와 그 구성을 완전히 파악합니다. 여기에는 경로, 경로 매개변수, 검색 매개변수, 컨텍스트 및 제공한 다른 모든 구성이 포함됩니다. 즉, 100% 타입 안전성을 바탕으로 애플리케이션의 모든 라우트로 탐색할 수 있으며 링크나 탐색 호출이 성공한다는 확신을 가질 수 있습니다.
- TanStack Router는 손실 없는 타입 추론을 제공합니다. 수많은 제네릭 타입 매개변수를 사용해 제공한 모든 타입 정보를 API 전체와 최종적으로 애플리케이션에 강제하고 전달합니다. 이 수준의 타입 안전성과 개발자 확신을 제공하는 다른 라우터는 없습니다.
이 모든 것이 의미하는 바는 다음과 같습니다.
- 자동 완성 및 타입 힌트를 통한 빠른 기능 개발
- 더 안전하고 빠른 리팩터링
- 코드가 예상대로 작동한다는 확신
일급 검색 매개변수
검색 매개변수는 종종 나중에 고려되는 대상으로 취급됩니다. 파싱하고 업데이트할 수 있는 문자열의 블랙박스일 뿐, 그 이상은 제공하지 않는 경우가 많습니다. 기존 솔루션은 타입 안전하지도 않으므로 이를 다룰 때 더 주의해야 합니다. 가장 "현대적인" 프레임워크와 라우터조차 이 상태를 관리하는 방법을 직접 결정하도록 남겨 둡니다. 검색 문자열을 객체로 파싱해 주기도 하고, URLSearchParams로 직접 처리해야 하기도 합니다.
잠시 물러나 검색 매개변수가 애플리케이션 전체에서 가장 강력한 상태 관리자라는 점을 기억해 봅니다. 검색 매개변수는 전역적이고 직렬화할 수 있으며 북마크하고 공유할 수 있으므로, 페이지 새로 고침이나 소셜 공유 후에도 유지해야 하는 모든 종류의 상태를 저장하기에 완벽합니다.
이 역할을 충실히 수행하기 위해 검색 매개변수는 TanStack Router에서 일급 시민입니다. TanStack Router는 표준 URLSearchParams를 기반으로 하면서도 강력한 파서/직렬화기를 사용해 검색 매개변수의 더 깊고 복잡한 데이터 구조를 관리하며, 이를 타입 안전하고 쉽게 사용할 수 있게 합니다.
URL 안에 바로 useState가 있는 것과 같습니다!
검색 매개변수는 다음과 같습니다.
- JSON으로 자동 파싱 및 직렬화됩니다.
- 검증되고 타입이 지정됩니다.
- 부모 라우트에서 상속됩니다.
- 로더, 컴포넌트 및 훅에서 접근할 수 있습니다.
- useSearch 훅, Link, navigate 및 router.navigate API로 쉽게 수정할 수 있습니다.
- 사용자 지정 검색 필터와 미들웨어로 맞춤 설정할 수 있습니다.
- 세분화된 검색 매개변수 선택기를 통해 구독하여 효율적으로 다시 렌더링할 수 있습니다.
TanStack Router의 검색 매개변수를 사용하기 시작하면 지금까지 어떻게 이것 없이 개발했는지 의문이 들 것입니다.
캐싱 내장 및 편리한 데이터 로딩
데이터 로딩은 모든 애플리케이션의 중요한 부분입니다. 대부분의 기존 라우터가 어떤 형태로든 핵심 데이터 로딩 API를 제공하지만, 캐싱과 데이터 수명 주기 관리에서는 부족한 경우가 많습니다. 기존 솔루션에는 다음과 같은 일반적인 문제가 있습니다.
- 캐싱이 전혀 없습니다. 데이터는 항상 최신이지만 사용자는 자주 접근하는 데이터가 반복해서 로드될 때까지 기다려야 합니다.
- 지나치게 공격적인 캐싱입니다. 데이터가 너무 오래 캐시되어 오래된 데이터와 좋지 않은 사용자 경험으로 이어집니다.
- 투박한 무효화 전략과 API입니다. 데이터가 너무 자주 무효화되어 불필요한 네트워크 요청과 리소스 낭비가 발생하거나, 데이터를 무효화할 시점을 세밀하게 제어할 수 없을 수 있습니다.
TanStack Router는 캐싱과 데이터 로딩에 대한 다음 두 가지 접근 방식으로 이러한 문제를 해결합니다.
캐시 내장
TanStack Router는 Router와 원활하게 작동하는 경량 내장 캐싱 계층을 제공합니다. 이 캐싱 계층은 TanStack Query를 느슨하게 기반으로 하지만 기능이 더 적고 API 표면적이 훨씬 작습니다. TanStack Query와 마찬가지로 합리적이면서 강력한 기본값을 통해 데이터를 재사용하도록 캐시하고, 필요할 때 무효화하며, 사용하지 않을 때 가비지 컬렉션되도록 합니다. 필요할 때 캐시를 수동으로 무효화하는 간단한 API도 제공합니다.
유연하고 강력한 데이터 수명 주기 API
TanStack Router는 TanStack Query, SWR, Apollo, Relay 또는 직접 만든 사용자 지정 데이터 가져오기 솔루션 같은 기존 데이터 가져오기 라이브러리와 쉽게 통합되는 유연하고 강력한 데이터 로딩 API로 설계되었습니다. context, beforeLoad, loaderDeps, loader 같은 구성 가능한 API가 함께 작동하여 선언적 데이터 종속성을 정의하고, 데이터를 프리페치하며, 외부 데이터 소스의 수명 주기를 쉽게 관리할 수 있습니다.
상속되는 라우트 컨텍스트
TanStack Router의 라우터 및 라우트 컨텍스트는 라우트에 특화된 컨텍스트를 정의하고 모든 자식 라우트가 이를 상속하도록 하는 강력한 기능입니다. 라우터와 루트 라우트 자체도 컨텍스트를 제공할 수 있습니다. 컨텍스트는 동기식 또는 비동기식으로 구성할 수 있으며 라우트와 라우트 구성 사이에서 데이터, 구성 또는 함수를 공유하는 데 사용할 수 있습니다. 다음과 같은 상황에서 특히 유용합니다.
- 인증 및 권한 부여
- 하이브리드 SSR/CSR 데이터 가져오기 및 프리로딩
- 테마 지정
- 싱글톤 및 전역 유틸리티
- 프리로딩, 로딩 및 렌더링 단계 전반의 커링 또는 부분 적용
라우트 컨텍스트가 타입 안전하지 않다면 어떤 의미가 있을까요? TanStack Router의 라우트 컨텍스트는 완전히 타입 안전하며 추가 비용 없이 추론됩니다.
파일 기반 및/또는 코드 기반 라우팅
TanStack Router는 파일 기반 라우팅과 코드 기반 라우팅을 동시에 지원합니다. 이러한 유연성 덕분에 프로젝트 요구 사항에 가장 잘 맞는 접근 방식을 선택할 수 있습니다.
TanStack Router의 파일 기반 라우팅 접근 방식은 사용자에게 직접 노출되는 방식으로 독특합니다. Vite 플러그인 또는 TanStack Router CLI가 라우트 구성을 대신 생성하지만 생성된 코드를 어떻게 사용할지는 직접 결정합니다. 즉, 파일 기반 라우팅을 사용하더라도 라우트와 라우터를 항상 완전히 제어할 수 있습니다.
감사의 말
TanStack Router는 다음을 비롯해 여러 OSS 프로젝트가 대중화한 개념과 패턴을 기반으로 합니다.
이러한 프로젝트의 개발에 들어간 투자, 위험 감수 및 연구를 인정하며, 이들이 세운 기준을 더욱 높일 수 있어 기쁘게 생각합니다.
시작합니다!
개요는 이 정도입니다. TanStack Router로 할 수 있는 일은 훨씬 더 많습니다. 다음 버튼을 눌러 시작합니다!