React Router v6 완벽 가이드 – 페이지 라우팅 기본부터 동적 라우트까지

 

SPA(Single Page Application)인 React에서는 페이지 전환을 위해 React Router를 사용합니다. 이 글에서는 React Router v6의 기본 사용법부터 동적 라우팅, 중첩 라우팅까지 핵심 기능을 정리합니다.

1. 설치하기

npm install react-router-dom

2. 기본 라우팅 구성

// App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

3. Link 컴포넌트로 페이지 이동

<a> 태그 대신 <Link>를 사용해야 페이지 리로딩 없이 이동됩니다.

import { Link } from 'react-router-dom';

<Link to="/about">About 페이지로</Link>

4. 동적 라우트 (URL 파라미터)

// Route 설정
<Route path="/users/:id" element={<UserDetail />} />

// 파라미터 가져오기
import { useParams } from 'react-router-dom';

function UserDetail() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

5. 중첩 라우트

// 부모 라우트
<Route path="/dashboard" element={<DashboardLayout />}>
  <Route path="stats" element={<Stats />} />
  <Route path="settings" element={<Settings />} />
</Route>

// DashboardLayout.js
import { Outlet } from 'react-router-dom';

function DashboardLayout() {
  return (
    <div>
      <h2>Dashboard</h2>
      <Outlet />
    </div>
  );
}

6. Navigate로 리다이렉트

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

{isLogin ? <Dashboard /> : <Navigate to="/login" />}

7. NotFound 페이지 처리

<Route path="*" element={<NotFound />} />

8. 마무리

React Router v6는 간결하고 명확한 API로 라우팅을 효율적으로 구현할 수 있게 도와줍니다. 페이지 구성의 핵심인 만큼, 기본기부터 잘 익혀두면 복잡한 애플리케이션도 문제없이 구축할 수 있습니다.