Data Router(loader/action)와 옛 BrowserRouter+useEffect는 어떻게 나누나요?

라우트 중심으로 데이터·폼·에러를 일관되게 다루려면 v6.4+ Data Router API가 유리합니다. 기존 패턴은 점진적 이전이 가능하지만, 큰 앱은 구조를 한번 정리하는 편이 낫습니다.

과 중첩 라우트에서 데이터는 어디에 두나요?

부모 loader에서 내려받은 데이터를 useLoaderData로 자식이 공유하거나, 각 세그먼트 loader로 쪼갤 수 있습니다. 캐시·무효화 전략을 라우트 경계에 맞춥니다.

SPA에서 초기 URL과 서버 404(직접 친 주소) 설정은?

정적 호스팅이면 index.html로 폴백하는 서버/호스트 규칙이 필요합니다. 클라이언트만으로는 F5 직접 URL을 해석할 수 없습니다.

React 18/19 Suspense와 라우트 로딩은?

lazy+React.lazy 또는 라우트 단 lazy 경계를 두고, 데이터 로딩은 defer·스켈레톤과 함께 설계합니다. 팀·버전에 맞는 권장 패턴을 문서에 따릅니다.

React Router 완벽 가이드 | 라우팅·Loader

2026년 4월 7일 · 3분 읽기 · 수정 2026년 4월 7일 중급

이 글의 핵심

React Router로 SPA 라우팅을 구현하는 완벽 가이드. BrowserRouter, Loader, Action, Protected Routes, Nested Routes까지 실전 예제로 정리. Start now.

이 글의 핵심

React Router로 SPA 라우팅을 구현하는 완벽 가이드입니다. BrowserRouter, Loader, Action, Protected Routes, Nested Routes까지 실전 예제로 정리했습니다.

실무 경험 공유: React Router v6로 업그레이드하면서, 코드가 40% 감소하고 타입 안전성이 향상된 경험을 공유합니다.

들어가며: “SPA 라우팅이 복잡해요”

실무 문제 시나리오

시나리오 1: 페이지 전환이 필요해요

새로고침은 느립니다. React Router로 빠른 전환이 가능합니다. 시나리오 2: 인증 라우트가 필요해요

수동 체크가 번거롭습니다. Protected Routes로 간단히 구현할 수 있습니다. 시나리오 3: 데이터 로딩이 복잡해요

useEffect가 많습니다. Loader로 깔끔하게 처리할 수 있습니다.

1. React Router란?

핵심 특징

React Router는 React SPA 라우팅 라이브러리입니다. 주요 기능:

선언적 라우팅: JSX 기반
Nested Routes: 레이아웃 공유
Loader: 데이터 페칭
Action: Form 처리
Protected Routes: 인증 라우트

2. 설치 및 기본 설정

설치

npm install react-router-dom

기본 라우팅

// main.tsx
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Root from './routes/root';
import Home from './routes/home';
import About from './routes/about';
const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: 'about',
        element: <About />,
      },
    ],
  },
]);
export default function App() {
  return <RouterProvider router={router} />;
}

3. Nested Routes

Layout

// routes/root.tsx
import { Outlet, Link } from 'react-router-dom';
export default function Root() {
  return (
    <div>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/blog">Blog</Link>
      </nav>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

4. Loader

기본 Loader

// routes/posts.tsx
import { useLoaderData } from 'react-router-dom';
export async function loader() {
  const response = await fetch('/api/posts');
  const posts = await response.json();
  return { posts };
}
export default function Posts() {
  const { posts } = useLoaderData() as { posts: Post[] };
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
// main.tsx
{
  path: 'posts',
  element: <Posts />,
  loader: postsLoader,
}

파라미터 Loader

// routes/post.tsx
import { useLoaderData, LoaderFunctionArgs } from 'react-router-dom';
export async function loader({ params }: LoaderFunctionArgs) {
  const response = await fetch(`/api/posts/${params.postId}`);
  const post = await response.json();
  return { post };
}
export default function Post() {
  const { post } = useLoaderData() as { post: Post };
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

5. Action

// routes/new-post.tsx
import { Form, redirect, ActionFunctionArgs } from 'react-router-dom';
export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const response = await fetch('/api/posts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      title: formData.get('title'),
      content: formData.get('content'),
    }),
  });
  const post = await response.json();
  return redirect(`/posts/${post.id}`);
}
export default function NewPost() {
  return (
    <Form method="post">
      <input name="title" required />
      <textarea name="content" />
      <button type="submit">Create Post</button>
    </Form>
  );
}

6. Protected Routes

// components/ProtectedRoute.tsx
import { Navigate, Outlet } from 'react-router-dom';
import { useAuth } from './AuthContext';
export default function ProtectedRoute() {
  const { user } = useAuth();
  if (!user) {
    return <Navigate to="/login" replace />;
  }
  return <Outlet />;
}
// main.tsx
{
  element: <ProtectedRoute />,
  children: [
    {
      path: 'dashboard',
      element: <Dashboard />,
    },
    {
      path: 'profile',
      element: <Profile />,
    },
  ],
}

7. Error Boundary

// routes/root.tsx
import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
export function ErrorBoundary() {
  const error = useRouteError();
  if (isRouteErrorResponse(error)) {
    return (
      <div>
        <h1>{error.status} {error.statusText}</h1>
        <p>{error.data}</p>
      </div>
    );
  }
  return (
    <div>
      <h1>Error</h1>
      <p>Something went wrong</p>
    </div>
  );
}

Link

import { Link } from 'react-router-dom';
<Link to="/about">About</Link>
<Link to={`/posts/${post.id}`}>View Post</Link>

useNavigate

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
const handleClick = () => {
  navigate('/dashboard');
  // navigate(-1); // 뒤로
  // navigate(1); // 앞으로
};

정리 및 체크리스트

핵심 요약

React Router: SPA 라우팅
Nested Routes: 레이아웃 공유
Loader: 데이터 페칭
Action: Form 처리
Protected Routes: 인증 라우트
Error Boundary: 에러 처리

구현 체크리스트

같이 보면 좋은 글

Remix Run 완벽 가이드
Next.js App Router 가이드
React 완벽 가이드

이 글에서 다루는 키워드

React Router, Routing, SPA, React, TypeScript, Frontend, Navigation

자주 묻는 질문 (FAQ)

Q. Next.js와 비교하면 어떤가요?

A. React Router는 SPA에 적합합니다. Next.js는 SSR/SSG가 필요할 때 사용합니다.

Q. v5에서 v6로 업그레이드가 어려운가요?

A. Breaking changes가 많지만, 마이그레이션 가이드가 잘 되어 있습니다.

Q. Remix와 관계가 있나요?

A. 네, Remix는 React Router 위에 구축되었습니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, 수많은 SPA에서 안정적으로 사용하고 있습니다.

심화 부록: 구현·운영 관점

이 부록은 앞선 본문에서 다룬 주제(「React Router 완벽 가이드 | 라우팅·Loader·Action·Protected Routes·실전 활용」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.

내부 동작과 핵심 메커니즘

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(런타임·게이트웨이·프로세스)
  participant D as 의존성(API·DB·큐·파일)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.

프로덕션 운영 패턴

영역	운영 관점 질문
관측성	요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성	입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성	재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능	캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포	롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가
용량	피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.

확장 예시: 엔드투엔드 미니 시나리오

앞선 본문 주제(「React Router 완벽 가이드 | 라우팅·Loader·Action·Protected Routes·실전 활용」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)
  authorize(validated, ctx)
  result = domainCore(validated)
  persistOrEmit(result, idempotentKey)
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상	가능 원인	조치
간헐적 실패	레이스, 타임아웃, 외부 의존성, DNS	최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하	N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스	프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가	캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납	상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패	환경 변수, 권한, 플랫폼 차이, lockfile	CI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정 불일치	프로필·시크릿·기본값, 리전	스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화
데이터 불일치	비멱등 재시도, 부분 쓰기, 캐시 무효화 누락	멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.

이 글이 도움이 되셨나요?

여러분의 피드백은 더 나은 콘텐츠를 만드는 데 도움이 됩니다

문제가 있거나 개선 제안이 있으시면 연락처로 알려주세요.

Keyboard Shortcuts

React Router 완벽 가이드 | 라우팅·Loader

이 글의 핵심

이 글의 핵심

들어가며: “SPA 라우팅이 복잡해요”

실무 문제 시나리오

useEffect가 많습니다. Loader로 깔끔하게 처리할 수 있습니다.

1. React Router란?

핵심 특징

2. 설치 및 기본 설정

설치

기본 라우팅

3. Nested Routes

Layout

4. Loader

기본 Loader

파라미터 Loader

5. Action

6. Protected Routes

7. Error Boundary

8. Navigation

Link

useNavigate

정리 및 체크리스트

핵심 요약

구현 체크리스트

같이 보면 좋은 글

이 글에서 다루는 키워드

자주 묻는 질문 (FAQ)

Q. Next.js와 비교하면 어떤가요?

Q. v5에서 v6로 업그레이드가 어려운가요?

Q. Remix와 관계가 있나요?

Q. 프로덕션에서 사용해도 되나요?

심화 부록: 구현·운영 관점

내부 동작과 핵심 메커니즘

프로덕션 운영 패턴

확장 예시: 엔드투엔드 미니 시나리오

문제 해결(Troubleshooting)

이 글이 도움이 되셨나요?