✅ React 기초 강좌

🎯 학습 목표

• URL 파라미터를 이용해 동적으로 데이터를 불러오는 방식을 이해한다.
• 여러 게시글/상품 등의 상세 페이지 라우팅 구조를 구현할 수 있다.
• useParams() 훅으로 URL 값을 읽어오는 방법을 익힌다.

✅ 동적 라우팅이란?

/:id, /:slug 형태로 URL에 따라 변수처럼 동작하는 라우트를 만드는 방식입니다.

예시:

/product/1
/product/2
/product/3

→ 동일한 컴포넌트에서 id 값만 달라짐

📦 예시 구조

App.jsx
├── /products           → 전체 상품 목록
├── /products/:id       → 상품 상세 페이지

🧪 useParams() 사용 예

jsx
복사편집
import { useParams } from 'react-router-dom';

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

  return <h2>상품 상세 페이지 - ID: {id}</h2>;
}

✅ 전체 예제 코드

📄 pages/ProductList.jsx

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

const products = [
  { id: '1', name: '노트북' },
  { id: '2', name: '마우스' },
  { id: '3', name: '키보드' },
];

function ProductList() {
  return (
    <div>
      <h2>🛍️ 상품 목록</h2>
      <ul>
        {products.map((item) => (
          <li key={item.id}>
            <Link to={`/products/${item.id}`}>{item.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

📄 pages/ProductDetail.jsx

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

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

  return (
    <div>
      <h2>📦 상품 상세 페이지</h2>
      <p>선택한 상품 ID: {id}</p>
    </div>
  );
}

export default ProductDetail;

📄 App.jsx 수정

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import ProductList from './pages/ProductList';
import ProductDetail from './pages/ProductDetail';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/products" element={<ProductList />} />
        <Route path="/products/:id" element={<ProductDetail />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

✅ 결과

• /products → 상품 목록 출력
• /products/1 → "선택한 상품 ID: 1"
• /products/2 → "선택한 상품 ID: 2"

✍️ 과제

🧩 1. 다음 구조를 구현해보세요

• /posts → 게시글 목록
• /posts/:id → 게시글 상세
• useParams를 활용해 id 출력