✅ React 기초 강좌

📦 폴더 구조

src/
├── App.jsx
├── pages/
│   ├── PostList.jsx
│   └── PostDetail.jsx

📄 pages/PostList.jsx

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

const posts = [
  { id: '1', title: 'React 시작하기' },
  { id: '2', title: 'useState 완전 정복' },
  { id: '3', title: 'React Router 기초' },
];

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

export default PostList;

📄 pages/PostDetail.jsx

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

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

  return (
    <div>
      <h2>📝 게시글 상세 페이지</h2>
      <p>게시글 ID: {id}</p>
    </div>
  );
}

export default PostDetail;

📄 App.jsx 라우팅 설정

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

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

export default App;

✅ 결과 확인

• /posts

  → 게시글 목록 출력 (링크 클릭 시 상세로 이동)

• /posts/1

  → 게시글 ID: 1 출력

• /posts/2

  → 게시글 ID: 2 출력

이로써 useParams()를 이용한 동적 라우팅 구조를 완성했습니다.

실제 블로그, 커머스, 게시판, 포트폴리오 사이트 모두 이런 구조로 상세 페이지를 구성합니다.

GitHub - heroyooi/react-app at ch4_2