10단계: React 라우팅

10-1. SPA와 라우팅 개념

React는 기본적으로 SPA(Single Page Application) 구조이며, 페이지 이동을 JavaScript로 처리합니다. 이를 위해 react-router-dom 라이브러리를 사용합니다.

10-2. 설치 및 기본 설정

npm install react-router-dom

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

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

10-3. Link 컴포넌트 사용

페이지 이동 시 <a> 태그 대신 Link 컴포넌트를 사용합니다.

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

<Link to="/about">소개</Link>

10-4. 동적 라우팅과 URL 파라미터

<Route path="/user/:id" element={<User />} />

컴포넌트 내부에서 파라미터 사용:

import { useParams } from 'react-router-dom';
const { id } = useParams();

10-5. 중첩 라우팅 구조

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="analytics" element={<Analytics />} />
</Route>

중첩된 컴포넌트 내부에서 Outlet으로 자식 라우트를 렌더링합니다.

import { Outlet } from 'react-router-dom';
<Outlet />

10-6. Navigate와 페이지 리다이렉트

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

<Route path="/login" element={isLoggedIn ? <Navigate to="/" /> : <Login />} />

또는 코드 내부에서 useNavigate 사용:

const navigate = useNavigate();
navigate("/home");

10-7. Not Found 페이지 처리

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

잘못된 경로 접근 시 fallback 페이지를 보여줍니다.

요약

• react-router-dom으로 SPA에서 페이지 전환 구현
• Link로 이동, useParams로 파라미터 추출
• 중첩 라우팅, 리다이렉트, NotFound 처리까지 가능
• 구성 구조가 명확하면 유지보수 및 확장에 유리함

심화학습

Q1. BrowserRouter 대신 HashRouter를 쓰는 경우는?
A1. 서버에서 SPA 라우팅을 지원하지 않거나, 정적 파일 서버에서 404가 뜨는 경우 HashRouter로 fallback 구조를 사용할 수 있습니다.

Q2. 중첩 라우팅의 장점은 무엇인가요?
A2. 복잡한 레이아웃 구조를 유지한 채 내부 콘텐츠만 교체 가능해 컴포넌트 구조를 깔끔하게 유지할 수 있습니다.

Q3. 라우트 보호를 위한 인증 체크는 어떻게 구현하나요?
A3. Route에 조건부 렌더링을 넣거나, ProtectedRoute 컴포넌트를 따로 만들어 로그인 여부에 따라 접근을 제한할 수 있습니다.