레슨 7 / 9·20분

React Router

React Router 기본

React Router는 SPA(Single Page Application)에서 URL에 따라 다른 컴포넌트를 보여주는 라우팅 라이브러리입니다. 페이지 전환 없이 URL이 변경되는 클라이언트 사이드 라우팅을 구현합니다.

tsx

import {
  BrowserRouter, Routes, Route, Link, NavLink
} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        {/* NavLink: 현재 경로와 일치하면 active 클래스 */}
        <NavLink to="/" className={({ isActive }) =>
          isActive ? "font-bold" : ""
        }>홈</NavLink>
        <NavLink to="/about">소개</NavLink>
        <NavLink to="/users">사용자</NavLink>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users" element={<UserList />} />
        <Route path="/users/:id" element={<UserDetail />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

동적 라우팅과 Params

:id처럼 경로에 변수를 포함시키면 동적 라우팅이 됩니다. useParams로 URL 파라미터를 읽고, useNavigate로 프로그래밍 방식의 이동을 합니다.

tsx

import { useParams, useNavigate, useSearchParams } from 'react-router-dom';

function UserDetail() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();

  const tab = searchParams.get("tab") || "profile";

  return (
    <div>
      <h2>사용자 #{id}</h2>
      <p>현재 탭: {tab}</p>

      <button onClick={() => navigate("/users")}>
        목록으로 돌아가기
      </button>
      <button onClick={() => navigate(-1)}>
        뒤로가기
      </button>
    </div>
  );
}

// 중첩 라우트
function Dashboard() {
  return (
    <div>
      <h1>대시보드</h1>
      <nav>
        <Link to="stats">통계</Link>
        <Link to="settings">설정</Link>
      </nav>
      {/* 중첩된 Route가 여기에 렌더링됨 */}
      <Outlet />
    </div>
  );
}

// App에서
<Route path="/dashboard" element={<Dashboard />}>
  <Route path="stats" element={<Stats />} />
  <Route path="settings" element={<Settings />} />
</Route>

보호된 라우트

인증이 필요한 페이지는 보호된 라우트(Protected Route) 패턴으로 구현합니다. 로그인하지 않은 사용자를 로그인 페이지로 리다이렉트합니다.

tsx

import { Navigate, Outlet } from 'react-router-dom';

// 인증 상태를 확인하는 래퍼 컴포넌트
function ProtectedRoute() {
  const { user } = useAuth(); // 커스텀 인증 Hook

  if (!user) {
    // 로그인 페이지로 리다이렉트
    return <Navigate to="/login" replace />;
  }

  return <Outlet />;
}

// 사용
<Routes>
  <Route path="/login" element={<Login />} />

  {/* 보호된 영역 */}
  <Route element={<ProtectedRoute />}>
    <Route path="/dashboard" element={<Dashboard />} />
    <Route path="/profile" element={<Profile />} />
    <Route path="/settings" element={<Settings />} />
  </Route>
</Routes>

💡

Next.js를 사용하면 파일 시스템 기반 라우팅이 자동으로 제공됩니다. app/about/page.tsx 파일을 만들면 /about 경로가 자동 생성되므로, React Router 설정이 필요 없습니다.

←컴포넌트 패턴과 Context 다음: 실전: 메모 앱 만들기→