React Router v7 입문부터 실전까지: Next.js 스타일로 배우는 단계별 가이드

1단계: React 프로젝트 및 라우팅 기본

• 프로젝트 생성: create-react-app 또는 vite로 SPA 프로젝트 시작
• React Router 설치: npm install react-router-dom@^7
• 기본 라우팅 구성: BrowserRouter, Routes, Route를 활용
• 페이지 컴포넌트 구성: /pages/Home.jsx, /pages/About.jsx 형식

2단계: 중첩 라우팅과 레이아웃

• createBrowserRouter 사용으로 중첩 라우트 구성
• Outlet 컴포넌트로 자식 라우트 삽입
• Header, Footer 등 공통 레이아웃 구성

3단계: 데이터 로딩

• loader: 라우팅 전에 데이터를 불러옴
• useLoaderData: 페이지 내부에서 데이터 접근
• Suspense: 비동기 로딩 처리

4단계: Form과 액션

• Form 컴포넌트: 네이티브 방식의 폼 전송
• action 함수: 서버 액션 처리
• useActionData: 처리 결과 접근

5단계: 인증 및 보호 라우팅

• loader에서 인증 검사: 미인증 시 로그인으로 리디렉션
• 로그인 페이지 구성: 인증 처리 후 이동
• 로컬 스토리지, Context 활용하여 인증 상태 유지

6단계: 고급 기능

• errorElement를 활용한 페이지 단위 오류 처리
• 다국어 경로 구성: /ko/home, /en/home 등
• 모달 라우팅: /photo/1?modal=true 형식

7단계: 미니 프로젝트

1. 블로그 SPA

• /posts: 글 목록
• /posts/:id: 글 보기
• /posts/new, /posts/:id/edit: 작성 및 수정
• /login, /signup: 로그인/회원가입

2. 관리자 대시보드

• /admin: 공통 레이아웃
• /admin/users: 사용자 목록
• /admin/posts: 글 관리

3. 레시피 사이트 (요리하는 개발자)

• / : 메인 페이지
• /recipes : 전체 레시피 목록
• /recipes/:id : 레시피 상세 페이지
• /recipes/new : 레시피 등록
• /my-recipes : 내 레시피 목록 (로그인 필요)
• /login, /signup : 인증 페이지
• /admin : 레시피 전체 관리

주요 기능: 중첩 라우팅, loader/action, 인증 처리, 보호 라우팅, 모달 라우팅 등 실전 학습용 예제 포함