C
React 목록
이전14 / 22다음
React/라우팅/Lesson 14

React Router

30분·theory
JavaScript

React Router

💡 왜 배워야 할까요?

🎯 페이지 새로고침 없이 빠르게 화면을 전환하는 SPA를 만들 수 있습니다.
💼 브라우저 뒤로가기, 북마크 같은 기본 기능을 자동으로 지원합니다.
⚡ 대규모 프로젝트에서 가장 많이 쓰는 표준 라우팅 라이브러리입니다.
🏢 실무에서는
토스, 당근마켓, 배달의민족 같은 회사들이 React Router를 핵심 기술로 사용합니다. 채용공고에서 'React Router 경험' 요구사항이 매우 흔하며, 이를 모르면 실무 프로젝트에 참여하기 어렵습니다.

개념

React Router v6는 현대 SPA의 네비게이션 표준으로, 중첩 라우팅과 Outlet을 통한 레이아웃 관리, loader를 통한 데이터 페칭 최적화가 핵심입니다. 대규모 프로젝트에서 필수적인 라우팅 아키텍처 스킬입니다.

왜 중요한가?

실무에서 어드민 페이지나 대시보드를 만들 때 사이드바-헤더-콘텐츠 구조의 중첩 레이아웃이 필수적이며, loader 패턴으로 페이지 진입 전 데이터를 미리 로딩해서 UX를 크게 개선할 수 있습니다. 특히 Next.js 대신 React SPA를 선택한 프로젝트에서는 반드시 알아야 하는 핵심 기술입니다.

핵심 개념

React Router v6는 아파트 구조와 비슷합니다. 중첩 라우팅은 '동-호수-방' 같은 계층 구조이고, Outlet은 각 층에서 하위 컴포넌트가 들어갈 '빈 공간'이며, loader는 방에 들어가기 전 미리 필요한 물건들을 준비해두는 것과 같습니다.

핵심 포인트

  • ▸중첩 라우팅으로 URL 계층 구조와 컴포넌트 구조를 일치시킴
  • ▸Outlet 컴포넌트를 통해 부모-자식 레이아웃 관리
  • ▸loader 함수로 컴포넌트 렌더링 전 데이터 미리 로딩
💻 나쁜 예시 - v5 스타일의 중첩 없는 라우팅 
// App.tsx - 안티패턴
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/dashboard/users" element={<DashboardUsers />} />
        <Route path="/dashboard/products" element={<DashboardProducts />} />
        <Route path="/dashboard/settings" element={<DashboardSettings />} />
      </Routes>
    </BrowserRouter>
  );
}

// 각 Dashboard 컴포넌트마다 중복된 레이아웃 코드
function DashboardUsers() {
  return (
    <div className="dashboard-layout">
      <Sidebar />
      <Header />
      <div className="content">
        <h1>사용자 관리</h1>
        {/* 사용자 리스트 */}
      </div>
    </div>
  );
}
💻 좋은 예시 - v6 중첩 라우팅과 Outlet 활용 
// App.tsx - 2025 권장 패턴
import { createBrowserRouter, RouterProvider, Outlet } from 'react-router-dom';
import { DashboardLayout } from './components/DashboardLayout';
import { Users, Products, Settings } from './pages';

// 중첩 라우팅 정의
const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/dashboard',
    element: <DashboardLayout />, // 부모 레이아웃
    children: [
      {
        index: true, // /dashboard 기본 경로
        element: <DashboardHome />,
      },
      {
        path: 'users',
        element: <Users />,
        loader: usersLoader, // 데이터 미리 로딩
      },
      {
        path: 'products',
        element: <Products />,
        loader: productsLoader,
      },
      {
        path: 'settings',
        element: <Settings />,
      },
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

// DashboardLayout.tsx - 재사용 가능한 레이아웃
function DashboardLayout() {
  return (
    <div className="dashboard-layout">
      <Sidebar />
      <div className="main-content">
        <Header />
        <div className="content">
          <Outlet /> {/* 자식 컴포넌트가 여기에 렌더링 */}
        </div>
      </div>
    </div>
  );
}

// loader 함수들 - 컴포넌트 렌더링 전 데이터 로딩
export async function usersLoader() {
  const users = await fetch('/api/users');
  return users.json();
}

// Users.tsx - loader 데이터 사용
import { useLoaderData } from 'react-router-dom';

function Users() {
  const users = useLoaderData() as User[];
  
  return (
    <div>
      <h1>사용자 관리</h1>
      {users.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}
💻 심화 예시 - 에러 바운더리와 로딩 상태 처리 
// router.tsx - 에러 처리와 로딩 상태까지 고려한 완전체
import { createBrowserRouter, isRouteErrorResponse } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/dashboard',
    element: <DashboardLayout />,
    errorElement: <DashboardErrorBoundary />, // 에러 바운더리
    children: [
      {
        path: 'users',
        element: <Users />,
        loader: usersLoader,
        errorElement: <UsersError />, // 페이지별 에러 처리
      },
    ],
  },
]);

// 에러 바운더리 컴포넌트
function DashboardErrorBoundary() {
  const error = useRouteError();
  
  if (isRouteErrorResponse(error)) {
    return (
      <div className="error-page">
        <h1>{error.status} {error.statusText}</h1>
        <p>{error.data}</p>
      </div>
    );
  }
  
  return (
    <div className="error-page">
      <h1>예상치 못한 오류가 발생했습니다</h1>
    </div>
  );
}

// loader에서 에러 처리
export async function usersLoader() {
  try {
    const response = await fetch('/api/users');
    if (!response.ok) {
      throw new Response('사용자 데이터를 불러올 수 없습니다', {
        status: response.status,
        statusText: response.statusText,
      });
    }
    return response.json();
  } catch (error) {
    throw new Response('네트워크 오류', { status: 500 });
  }
}

// 로딩 상태 표시를 위한 Suspense 활용
function App() {
  return (
    <Suspense fallback={<GlobalLoadingSpinner />}>
      <RouterProvider router={router} />
    </Suspense>
  );
}

💡 ⚠️ 흔한 실수

  • ▸Outlet을 깜빡하고 중첩 라우트가 렌더링되지 않는 경우 - 부모 컴포넌트에 반드시 추가 필요
  • ▸loader에서 에러 처리를 안 해서 앱이 크래시되는 경우 - try-catch로 에러를 Response 객체로 throw 해야 함
  • ▸index: true와 path: ''를 헷갈리는 경우 - index는 부모 경로의 기본값, path: ''는 모든 하위 경로 매치

💡 🎯 면접 준비

Q: React Router v6의 중첩 라우팅과 v5의 차이점을 설명해주세요
Q: Outlet 컴포넌트의 역할과 사용법을 설명해주세요
Q: loader 패턴을 사용하는 이유와 장점을 말씀해주세요

힌트: 중첩 라우팅은 URL 구조와 컴포넌트 계층의 일치, 레이아웃 재사용성 향상을 먼저 언급하고, Outlet은 자식 컴포넌트 렌더링 위치 지정, loader는 컴포넌트 렌더링 전 데이터 미리 로딩으로 UX 개선이라는 핵심 키워드로 답변 구성

⚛️ React 패턴 — React Router

React Router을 React에서 어떻게 쓰는지 코드와 함께 단계별로 익혀보세요.
1 🛣️ 1. Router 설치
$ npm install react-router-dom
↓
2 📋 2. 경로 정의
URL → 컴포넌트 매핑
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>
↓
3 🔗 3. 링크 이동
<Link>로 페이지 새로고침 없이 이동
<Link to="/about">소개</Link>
↓
4 🎯 4. 동적 파라미터
/users/:id 같은 동적 라우팅 + useParams

🎮 React Router — 단계별 이해

각 단계를 클릭해 내용을 읽고 ✓ 이해했어요 버튼으로 진행률을 확인하세요.
🖥️ 실행 결과 — 렌더링된 React 컴포넌트
✏️ React 코드 수정하기 (클릭해서 열기)
⚛️ React 18 + Babel Standalone — 결과 먼저 확인 후 코드 편집기에서 직접 수정해볼 수 있습니다.

확인 퀴즈

React Router에서 선언적으로 페이지를 이동하는 컴포넌트는?
💡 <Link to="/path">는 a 태그로 렌더링되지만 페이지 새로고침 없이 SPA 내비게이션을 해요. 프로그래매틱 이동은 useNavigate()를 사용해요.
먼저 읽으면 좋은 개념: useContext
다음 추천: 데이터 패칭
이전목록다음
React Router - React