📘 리액트 강의 9편 - React Router로 페이지 전환 구현하기

리액트 앱은 SPA(Single Page Application) 구조입니다.
하지만 실제로는 여러 페이지처럼 보이게 만들 수 있습니다.
이를 가능하게 해주는 도구가 바로 React Router입니다.

---

1. React Router란?

• URL에 따라 보여줄 컴포넌트를 바꿔주는 라이브러리
• 페이지 새로고침 없이 화면만 전환 가능 (SPA의 핵심)

---

2. 설치하기

npm install react-router-dom

버전 확인은 package.json에서 "react-router-dom": "^6" 이상이면 OK

---

3. 기본 구성 요소 (v6 기준)

구성요소 역할

<BrowserRouter>	라우팅 기능 활성화
<Routes>	라우트 목록
<Route>	경로별 컴포넌트 지정
<Link>	페이지 이동 (a 태그 대신 사용)
useParams()	URL 파라미터 읽기

---

4. 예제: 게시글 목록 & 상세보기 라우팅

---

📄 App.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import PostDetail from "./PostDetail";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/post/:id" element={<PostDetail />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

---

📄 Home.js

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

const posts = [
  { id: 1, title: "리액트 기초 배우기" },
  { id: 2, title: "useState 완전 정복" },
];

function Home() {
  return (
    <div>
      <h1>📚 게시글 목록</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link to={`/post/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Home;

---

📄 PostDetail.js

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

function PostDetail() {
  const { id } = useParams();

  return (
    <div>
      <h2>📝 게시글 상세</h2>
      <p>현재 게시글 ID는: {id}</p>
    </div>
  );
}

export default PostDetail;

---

5. 실행 결과

• / 주소에 접속하면 게시글 목록이 보임
• 게시글 제목 클릭 → /post/1 등으로 이동
• URL 파라미터로 ID를 받아 상세 내용 출력 가능

---

마무리

이제 여러분은 React 앱에서 페이지 전환을 구현할 수 있습니다!
React Router는 실무에서 거의 필수이며,
다음 강의에서는 중첩 라우팅, 페이지 네비게이션 등 고급 기능도 확장해볼 수 있습니다.