React Router 사용법 완전정복｜SPA에서 페이지 전환 구현하기 (기초부터 실전까지)

📘 리액트 스터디 시리즈 8편

React Router로 페이지 구성하기｜SPA에서 라우팅 처리하는 법

안녕하세요! 이번 편에서는 React Router를 이용해

페이지 이동

을 구현해볼 거예요 🚦

React는 기본적으로 SPA(Single Page Application) 구조라서, URL을 바꿔도 전체 페이지를 새로고침하지 않고 컴포넌트만 바꿔주는 방식을 사용합니다.

---

🔧 1. React Router 설치하기

npm install react-router-dom

✅ 설치가 완료되면 react-router-dom 패키지를 import 해서 사용합니다.

---

🗺️ 2. 기본 구조 이해하기

리액트 라우터는 다음과 같은 구조로 사용됩니다:

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

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

• <BrowserRouter>: 전체 라우터를 감싸는 컨테이너
• <Routes>: 경로 목록
• <Route>: 각각의 경로와 해당 컴포넌트 매핑

---

🏠 3. 예시: Home과 About 컴포넌트 만들기

function Home() {
  return <h1>홈 페이지입니다</h1>;
}

function About() {
  return <h1>소개 페이지입니다</h1>;
}

---

🔗 4. 페이지 이동은 Link 컴포넌트로

기존의 <a href> 대신 React Router의 Link를 사용합니다.

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

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

✅ 페이지 전체를 새로 고치지 않고, 컴포넌트만 변경됩니다.

---

📋 실습 - 간단한 라우팅 앱 구성

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">홈</Link> | 
        <Link to="/about">소개</Link>
      </nav>

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

✨ 이렇게 하면 SPA 환경에서 페이지 전환이 가능해집니다.

---

🧩 추가 팁

• 📌 URL 파라미터: :id 형식으로 사용 가능
• 📌 중첩 라우트, 동적 라우트 등 고급 기능도 존재
• 📌 useNavigate()로 프로그래밍 방식 이동도 가능

---

🧠 정리 - 오늘 배운 핵심 포인트

• ✔️ React Router를 사용하면 SPA에서도 URL 기반 페이지 이동 가능
• ✔️ BrowserRouter, Routes, Route 구조 이해
• ✔️ Link 컴포넌트로 화면 전환
• ✔️ 페이지는 컴포넌트로 구성하고 매핑

---

📌 다음 편 예고

9편에서는 Context API를 통해

컴포넌트 간 상태 공유

를 배워봅니다!

props 없이 전역 상태를 관리하는 방법, 드디어 알려드립니다 🚀

---

💬 댓글로 질문이나 피드백 남겨주세요! React Router, 이제 직접 써보며 익혀보세요 😊