❤️리액트 블로그에 좋아요 버튼 만들기

안녕하세요! 리액트 블로그 튜토리얼 아홉 번째 시간입니다 😄
이번에는 각 글에 좋아요 버튼을 추가해서 사용자의 반응을 표현해보겠습니다!

좋아요 수는 localStorage에 저장돼서, 새로고침해도 유지됩니다.

---

📌 목표

• 각 글에 ❤️ 좋아요 수 표시
• 좋아요 버튼 클릭 시 숫자 증가
• 좋아요 수 localStorage에 저장

---

📄 1. 글에 좋아요 수 속성 추가

App.js에서 addPost 함수에 likes: 0을 추가해 주세요:

const addPost = (newPost) => {
  const postWithId = {
    ...newPost,
    id: Date.now(),
    likes: 0 // ✅ 좋아요 수 초기화
  };
  const updatedPosts = [postWithId, ...posts];
  setPosts(updatedPosts);
  localStorage.setItem('my-blog-posts', JSON.stringify(updatedPosts));
};

---

📄 2. 좋아요 누르면 숫자 증가하는 함수 만들기

App.js에 좋아요 증가 함수 likePost를 추가합니다:

const likePost = (id) => {
  const updatedPosts = posts.map(post => {
    if (post.id === id) {
      return { ...post, likes: post.likes + 1 };
    }
    return post;
  });

  setPosts(updatedPosts);
  localStorage.setItem('my-blog-posts', JSON.stringify(updatedPosts));
};

---

📄 3. PostDetail.js에 좋아요 UI 추가

상세 페이지에서 좋아요 버튼과 수를 보여줍니다:

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

  if (!post) {
    return <div>글을 찾을 수 없습니다.</div>;
  }

  return (
    <div style={{ padding: '20px' }}>
      <h2>{post.title}</h2>
      <p>{post.content}</p>

      <button onClick={() => likePost(post.id)} style={{ fontSize: '16px', marginTop: '20px' }}>
        ❤️ 좋아요 ({post.likes})
      </button>
    </div>
  );
}

⚠️ 주의: likePost를 props로 넘겨줘야 하므로 App.js에서 다음과 같이 라우터를 수정하세요:

<Route path="/post/:id" element={
  <PostDetail posts={posts} likePost={likePost} />
} />

---

📄 4. (선택) PostList에서 좋아요 수 보여주기

글 목록에서도 좋아요 수를 간단히 보여줄 수 있어요:

<li key={post.id}>
  <Link to={`/post/${post.id}`}>
    {post.title}
  </Link>
  <span style={{ marginLeft: '10px', color: 'red' }}>
    ❤️ {post.likes}
  </span>
</li>

---

🎉 결과 요약

• 글마다 좋아요 버튼이 생겼고
• 누를 때마다 ❤️ 수가 올라갑니다
• localStorage에 저장되어 새로고침해도 유지됩니다

---