React Router 공식 템플릿에서 routes.ts가 다르게 보이는 이유

React Router를 학습하며 기본적으로 createBrowserRouter를 사용하는 방식에 익숙한 분들은, 공식 템플릿에서 routes.ts가 다르게 보이는 점에 당황할 수 있습니다.

1. 템플릿에서 사용된 코드 예시

import { type RouteConfig, index } from "@react-router/dev/routes";

export default [index("routes/home.tsx")] satisfies RouteConfig;

이 구성은 React Router 팀에서 실험적으로 제공하는 파일 기반 라우팅 설정을 사용하고 있는 방식입니다.

2. @react-router/dev/routes란?

• @react-router/dev/routes는 라우팅을 파일 경로 기반으로 자동 추론할 수 있게 도와주는 유틸리티입니다.
• index() 함수는 기본 라우트(index route)를 특정 파일로 연결합니다.
• 이 방식은 Next.js 스타일의 자동 라우팅에 가까운 구성을 제공합니다.

3. 이 구조는 내부적으로 어떻게 동작하나요?

[
  {
    path: "/",
    index: true,
    element: <Home />  // routes/home.tsx에서 가져옴
  }
]

4. 왜 우리가 배운 방식과 다른가요?

생성 방식	라우팅 구성	설명
createBrowserRouter 수동 구성	라우트 배열 직접 작성	공식 문서에서 주로 사용하는 일반적 방식
@react-router/dev/routes 자동 구성	파일 기반 자동 인식	템플릿에서 실험적으로 제공되는 고급 방식

5. 어떤 방식으로 학습해야 할까요?

• 처음 React Router를 배우는 경우에는 createBrowserRouter를 직접 사용하는 방식으로 학습하는 것이 추천됩니다.
• 이후 라우팅 구조를 자동화하고 싶을 때 @react-router/dev 방식을 도입해도 좋습니다.

결론

React Router 공식 템플릿은 최신 구조를 실험적으로 반영하고 있어 처음에는 다르게 보일 수 있습니다. 하지만 핵심은 동일한 라우팅 흐름이며, 기본 개념을 확실히 익힌 뒤 고급 구성을 사용하는 것이 바람직합니다.