티스토리 뷰

기록/개인

React Router v7 라우팅이 어떻게 자동으로 연결될까

als982001 2025. 12. 21. 18:23

 

1. 개요

 사이드 프로젝트를 진행하면서 라우팅 설정을 해야했다. 그래서 이왕 하는 거 노마드코더 강의를 들으면서 이용해보았던 react router v7로 적용해보았다. 그런데 막상 적용한 후 생각을 해보니 어떤 원리로 라우팅이 자동으로 연결되는지 잘 모르고 있었다. 그래서 이에 대해 찾아본 후, React Router v7을 프레임워크 모드로 사용할 때, 현재 프로젝트를 기준으로 간단하게 정리하기로 했다.

 

2. 단계별 흐름

2-1. 서버가 올라가면 Vite가 vite.config.ts를 읽는다. 

import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vite.dev/config/
export default defineConfig({
  plugins: [reactRouter(), tsconfigPaths()],
});
  • reactRouter() 플러그인이 React Router v7 시스템을 활성화
  • tsconfigPaths() 플러그인이 ~/* 경로를 ./app/*으로 변환

 

2-2. React Router 플러그인이 app/route.ts 파일을 찾아서 읽는다.

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

export default [
  // 홈 페이지 (대시보드)
  index("./features/dashboard/pages/home-page.tsx"),

  // 로그인 페이지
  route("/login", "./features/auth/pages/login-page.tsx"),
] satisfies RouteConfig;
  • React Router는 규칙에 따라 app/routes.ts 파일을 자동으로 찾음.
  • 이 파일에서 어떤 URL에 어떤 페이지를 보여줄지 매핑 정보를 가져옴
  • index(): 기본 경로("/")
  • route(경로, 파일): 특정 경로 매핑

 

2-3. 브라우저에서 주소를 입력하면 React Router가 app.root.tsx를 먼저 로딩한다.

import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";

import type { Route } from "./+types/root";
import "./app.css";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  return <Outlet />;
}

export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
  // 생략
}
  • root.tsx는 모든 페이지를 감싸는 껍데기(레이아웃)
  • Layout: HTML 구조 (head, body 등)
  • App: 페이지 전환이 일어나는 컨테이너
  • <Outlet />: 현재 URL에 맞는 페이지가 여기에 표시됨

2-4. React Router가 현재 URL을 확인하고 routes.ts와 매칭한다.

2-4-1. 예시 1: http://localhost:5173 접속

  1. URL: "/"
  2. routes.ts 확인 -> index("./features/dashboard/pages/home-page.tsx")
  3. home-page.tsx를 로딩

2-4-2. 예시 2: http://localhost:5173/login 접속

  1. URL: "/login"
  2. routes.ts 확인 -> route("/login", "./features/auth/pages/login-page.tsx")
  3. login-page.tsx 로딩

 

2-5. 매칭된 페이지 컴포넌트를 <Outlet /> 위치에 렌더링한다.

// root.tsx의 App 컴포넌트
  export default function App() {
    return <Outlet />;
    // ↑ 여기에 home-page.tsx 또는 login-page.tsx가 들어감
  }

  "/" 접속 시:
  root.tsx
    └─ Layout
        └─ App
            └─ <Outlet /> → HomePage 컴포넌트가 렌더링됨

  "/login" 접속 시:
  root.tsx
    └─ Layout
        └─ App
            └─ <Outlet /> → LoginPage 컴포넌트가 렌더링됨

 

2-6. 페이지 이동 시 (예: 로그인 -> 홈)

 // login-page.tsx
  <Link to="/">홈으로 돌아가기</Link>
  1. <Link> 클릭
  2. React Router가 브라우저 히스토리 API 사용 (페이지 새로고침 없음)
  3. URL만 "/"로 변경
  4. 2-4번 단계로 돌아가서 다시 매칭
  5. <Outlet />에 HomePage 렌더링

3. 간단 정리

3-1. 전체 흐름도

  [서버 시작]
      ↓
  [vite.config.ts 읽기]
      ↓
  [reactRouter() 플러그인 활성화]
      ↓
  [app/routes.ts 자동 로딩]
      ↓
      ├─ "/" → home-page.tsx
      └─ "/login" → login-page.tsx

  [브라우저에서 URL 접속]
      ↓
  [root.tsx 로딩 (전역 레이아웃)]
      ↓
  [현재 URL 확인]
      ↓
  [routes.ts에서 매칭되는 파일 찾기]
      ↓
  [해당 페이지 컴포넌트를 <Outlet />에 렌더링]
      ↓
  [화면 표시]

 

3-2. 핵심 정리

파일 역할
vite.config.ts React Router 시스템을 활성화
app/routes.ts URL과 페이지 파일을 매핑하는 설정 파일
app/root.tsx 모든 페이지를 감싸는 전역 레이아웃
<Outlet /> 실제 페이지가 렌더링되는 자리 표시자
페이지 컴포넌트 URL에 따라 <Outlet />에 표시되는 내용

 

'기록 > 개인' 카테고리의 다른 글

Vercel 배포 중 React Router v7 빌드 오류 해결기  (1) 2026.01.18
사이드 프로젝트 Snap Voca 02 - 히스토리 페이지 추가  (0) 2026.01.03
프로그래머스 - 이중우선순위큐 (C++), multiset  (0) 2025.12.15
Supabase RPC로 이벤트 트래킹 구현  (0) 2025.11.16
PostgreSQL 권한 관리(DCL) 배운 것 정리  (0) 2025.04.19
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/04   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
글 보관함