React Router ✅ SPA에서 페이지 전환 구현하는 방법

 

 

기존의 웹사이트는 URL 변경 시 서버에서 새로운 페이지를 로드하는 방식이었습니다.
하지만 SPA에서는 실제 HTML은 하나(index.html)만 존재하고,
페이지 전환은 자바스크립트로 UI를 바꿔주는 방식으로 이루어집니다.

 

👉 이 과정을 쉽게 구현해주는 게 React Router입니다.

---

⚙️ 1. React Router 설치

 

npm install react-router-dom

 

---

📌 2. 기본 구조

 

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>
  );
}

export default App;

• BrowserRouter: 라우터 컨테이너
• Routes: 여러 라우트들을 감싸는 영역
• Route: 특정 경로(path)와 컴포넌트를 매핑

---

📌 3. 페이지 이동 (Link)

 

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

function Navbar() {
  return (
    <nav>
      <Link to="/">홈</Link>
      <Link to="/about">소개</Link>
    </nav>
  );
}

• <a href> 대신 <Link> 사용
• 이유: a 태그는 페이지 새로고침을 발생시키지만,
  Link는 클라이언트 라우팅 방식으로 부드럽게 전환

---

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

 

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

// User.js
import { useParams } from "react-router-dom";

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

 

👉 /user/10 → User ID: 10 출력

---

📌 5. 프로그래밍 방식 네비게이션

 

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

// User.js
import { useParams } from "react-router-dom";

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

 

---

📌 6. 중첩 라우트 (Nested Routes)

 

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

 

👉 /dashboard/profile, /dashboard/settings 가능

---

⚡ 7. 실무 팁

• ✅ Link와 useNavigate를 적절히 활용
• ✅ 공통 레이아웃(헤더/푸터)은 중첩 라우팅으로 관리
• ✅ 인증이 필요한 페이지는 Protected Route(가드) 패턴 적용
• ✅ Suspense와 함께 코드 스플리팅 적용 → 성능 최적화

---

📝 마무리 정리

• React Router는 SPA에서 페이지 전환을 구현하는 필수 라이브러리
• 기본 라우팅 → 동적 파라미터 → 네비게이션 → 중첩 라우트까지 이해하면 기본기 완성
• 실무에서는 인증 처리 + 코드 스플리팅까지 함께 적용하는 경우가 많음