🔍 React Router로 글 상세보기 만들기 (블로그 기능 확장)

안녕하세요! 리액트 블로그 튜토리얼 세 번째 시간입니다. 😊
오늘은 React Router를 활용해서
글 목록에서 글을 클릭하면 상세 페이지로 이동하는 기능을 만들어볼 거예요.

---

📦 1. React Router 설치

터미널에서 아래 명령어를 입력해 React Router를 설치해주세요:

npm install react-router-dom

---

🛠️ 2. Router 설정하기

📄 src/App.js 수정

import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import PostList from './components/PostList';
import PostForm from './components/PostForm';
import PostDetail from './components/PostDetail';

function App() {
  const [posts, setPosts] = useState([
    { id: 1, title: '리액트 입문기', content: '리액트를 처음 써봤어요!' },
    { id: 2, title: '컴포넌트란?', content: '컴포넌트는 UI의 조각이에요.' }
  ]);

  const addPost = (newPost) => {
    const postWithId = { ...newPost, id: posts.length + 1 };
    setPosts([postWithId, ...posts]);
  };

  return (
    <Router>
      <Header />
      <Routes>
        <Route path="/" element={
          <>
            <PostForm onAddPost={addPost} />
            <PostList posts={posts} />
          </>
        } />
        <Route path="/post/:id" element={<PostDetail posts={posts} />} />
      </Routes>
    </Router>
  );
}

export default App;

---

📄 3. PostItem 수정 (링크 추가)

📄 src/components/PostItem.js

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

function PostItem({ id, title, content }) {
  return (
    <div style={{ marginBottom: '20px', borderBottom: '1px solid #ccc', paddingBottom: '10px' }}>
      <h2>
        <Link to={`/post/${id}`} style={{ textDecoration: 'none', color: 'black' }}>
          {title}
        </Link>
      </h2>
      <p>{content.slice(0, 50)}...</p>
    </div>
  );
}

export default PostItem;

💡 클릭 가능한 제목이 생기고, 해당 글의 상세 페이지로 이동됩니다!

---

📝 4. PostDetail 만들기

📄 src/components/PostDetail.js

import React from 'react';
import { useParams, Link } from 'react-router-dom';

function PostDetail({ posts }) {
  const { id } = useParams();
  const post = posts.find(p => p.id === parseInt(id));

  if (!post) {
    return <div style={{ padding: '20px' }}>해당 글을 찾을 수 없습니다.</div>;
  }

  return (
    <div style={{ padding: '20px' }}>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
      <Link to="/" style={{ display: 'inline-block', marginTop: '20px' }}>
        ← 목록으로 돌아가기
      </Link>
    </div>
  );
}

export default PostDetail;

---

🎉 5. 완성된 동작 흐름

• 블로그 메인 페이지에서 글 제목을 클릭하면 상세 페이지로 이동
• 상세 페이지에는 글 제목과 내용이 보여지고, 뒤로 돌아가기 링크도 제공

---

📌 이 튜토리얼로 배운 것

• React Router 설치 및 기본 설정
• <Routes>, <Route>로 페이지 라우팅 구성
• useParams로 URL에서 동적 파라미터 읽기
• Link 컴포넌트로 페이지 이동 구현

---

⏭️ 다음 편 예고

다음 편에서는 로컬 스토리지 저장 기능을 추가해서
새로고침해도 글이 사라지지 않도록 만들어볼 거예요!
더 나아가면 댓글, 검색, 좋아요 기능까지도 도전할 수 있답니다 😎