⭐ 7편 — React Router 완전 정복: 페이지 이동부터 동적·중첩 라우팅까지 실전 가이드

⭐ 7편 — React Router 완전 정복: 페이지 이동부터 동적·중첩 라우팅까지 실전 가이드

리액트는 SPA(Single Page Application) 방식이기 때문에
브라우저 주소가 바뀐다고 실제로 새로운 HTML 파일을 로드하지 않습니다.
대신 라우터가 경로에 따라 다른 컴포넌트를 보여주는 방식으로 동작합니다.
React Router는 리액트에서 가장 많이 쓰는 공식적인 라우팅 라이브러리이며,
웹 서비스의 구조를 잡을 때 반드시 필요한 도구입니다.

✅ 1. React Router 설치

React Router v6 기준 설치 명령어입니다.
npm install react-router-dom
설치 후엔 App 컴포넌트에서 라우팅 구성을 시작할 수 있습니다.

✅ 2. 기본 구조: BrowserRouter, Routes, Route

React Router를 쓰려면 반드시 <BrowserRouter> 안에서 페이지들을 정의해야 합니다.
✔ 기본 라우팅 예제
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>
);
}
흐름 설명
/ → Home 컴포넌트
/about → About 컴포넌트
그때그때 주소에 따라 다른 컴포넌트가 렌더링됩니다.

✅ 3. 페이지 이동: useNavigate

이전 버전에서는 useHistory()를 썼지만,
v6에서는 useNavigate로 변경되었습니다.
✔ 페이지 이동 코드
import { useNavigate } from "react-router-dom";
function Home() {
const navigate = useNavigate();
return (
<button onClick={() => navigate("/about")}>
소개 페이지로 이동
</button>
);
}
✔ 이동 시 데이터 전달도 가능
navigate("/about", { state: { name: "유경상" } });
location.state로 받아 사용할 수 있습니다.

✅ 4. URL 파라미터 받기: useParams (동적 라우팅)

상품 상세 페이지나 게시글 상세 페이지처럼
/products/10 같은 형태에서 숫자(10)를 받아올 때 사용하는 기능입니다.
✔ 라우트 정의
<Route path="/product/:id" element={<ProductDetail />} />
✔ 값 받기
import { useParams } from "react-router-dom";
function ProductDetail() {
const { id } = useParams();
return <h1>{id}번 상품 상세 페이지</h1>;
}
이 패턴은 실무에서 100% 쓰입니다.

✅ 5. 중첩 라우트(Nested Routes)

대시보드처럼
부모 레이아웃 아래에 여러 페이지를 가지고 있는 구조에서 유용합니다.
✔ 기본 예제
<Route path="/dashboard" element={<Dashboard />}>
<Route path="profile" element={<Profile />} />
<Route path="settings" element={<Settings />} />
</Route>
✔ Outlet 사용
부모 컴포넌트에서 Outlet을 사용해 자식이 들어올 위치를 만들어줍니다.
import { Outlet } from "react-router-dom";
function Dashboard() {
return (
<div>
<h1>대시보드</h1>
<Outlet />
</div>
);
}
🔥 실전에서 자주 쓰는 중첩 라우트 패턴
예를 들어 /mypage 아래에 메뉴가 여러 개 있는 경우:
/mypage
/mypage/info
/mypage/orders
/mypage/address
이걸 하나하나 Route로 나열하면 복잡해지기 때문에
중첩 라우트 구조를 쓰면 깔끔해집니다.

✅ 6. 404 페이지 처리 (NotFound 페이지)

존재하지 않는 경로로 이동했을 때
NotFound 페이지를 보여주는 것도 서비스에서 매우 중요합니다.
✔ 구현 예
<Route path="*" element={<NotFound />} />
*는 “모든 경로”를 의미합니다.

🔥 실전에서 유용한 라우팅 패턴 3가지

✔ 패턴 1) 로그인 여부에 따라 라우팅 제어 (PrivateRoute)
로그인한 사용자만 접근 가능한 페이지를 만들 때:
function PrivateRoute({ children }) {
const isLogin = localStorage.getItem("token");
return isLogin ? children : <Navigate to="/login" />;
}
사용:
<Route path="/mypage" element={<PrivateRoute><MyPage /></PrivateRoute>} />
✔ 패턴 2) 쿼리 스트링 읽기 (검색 기능)
import { useSearchParams } from "react-router-dom";
const [params] = useSearchParams();
const keyword = params.get("keyword");
검색 페이지 제작 시 반드시 사용합니다.
✔ 패턴 3) 레이아웃 기반 페이지 구성
<Route element={<MainLayout />}>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Route>
SPA에서 header/footer를 고정하고
내용만 바뀌게 할 때 매우 유용합니다.

🚨 초보자가 리액트 라우터에서 하는 실수 4가지

❌ 1) 컴포넌트 안에서 Router를 중복 선언
App.jsx 최상위에 한 번만 있어야 합니다.
❌ 2) 중첩 라우트에서 Outlet을 안 씀
자식 페이지가 화면에 나타나지 않게 됩니다.
❌ 3) path 중복
/about 아래 또 /about을 넣는 식의 구조를 실수로 만듭니다.
❌ 4) useNavigate를 함수 밖에서 사용
Hook은 반드시 컴포넌트 안에서 사용해야 합니다.
✨ 마무리: 라우터를 이해하면 서비스 흐름이 보인다

React Router는
✔ 화면 전체 구조
✔ 페이지 이동
✔ 로그인 상태 관리
✔ 동적 상세 페이지
✔ 검색 페이지
등 모든 UI 흐름을 결정하는 중요한 요소입니다.
이번 글에서 기본부터 고급 패턴까지 다뤘으니
실제 프로젝트에서 바로 적용해볼 수 있을 거예요.