How I Recreated TanStack Router From Scratch
- 완전한 타입 안전성을 갖춘 React 라우터를 처음부터 만들었습니다. 🛠️
- 라우터는 로딩 상태, 프로그래밍 방식 탐색, 링크를 통한 탐색을 지원합니다. 🔗
- 링크 컴포넌트는 정의된 경로로만 이동할 수 있으며, 동적 매개변수가 필요한 경우 해당 매개변수를 전달해야 합니다. 🔑
- 로더는 타입 안전성을 지원하며, 로딩 상태와 타입 안전 반환 값을 제공합니다. ⏳
- 프로젝트는 React 라우터에서 원하는 기본적인 기능을 모두 포함합니다. 📦
- Tanstack Router 및 React Router와 유사한 스타일과 디자인을 사용했습니다. 🎨
- 타입 안전성을 추가하면 라우터 구현이 훨씬 복잡해집니다. 🤔
defineRoute
함수를 사용하여 경로를 정의하고, 컴포넌트, 매개변수, 로더 등을 전달합니다. ⚙️
Router Provider
는 애플리케이션을 감싸는 컨텍스트를 제공합니다. 🛡️
- 타입스크립트 마법을 위해, 라우트 타입을 애플리케이션에서 정의한 라우트 타입으로 오버라이드합니다. 🧙♂️
useRouterContext
훅을 통해 navigate
함수에 접근할 수 있습니다. 🧭
useLoaderData
훅은 로더의 데이터, 상태, 오류 상태를 제공합니다. 📊
useParams
훅은 URL 매개변수를 파싱하고 타입에 맞게 변환합니다. 🧮
routeParser
함수는 현재 URL과 일치하는 경로를 찾습니다. 🔍
- 레이아웃 경로는 부분적으로 일치하는 모든 경로를 찾습니다. 🧩