React와 Node.js를 사용한 웹 애플리케이션(게시판) 개발 강좌(18)

게시글 수정 및 삭제 기능 구현: 수정 폼과 삭제 기능 추가

이번 강의에서는 React와 Node.js를 사용하여 게시글 수정 및 삭제 기능을 구현하는 방법을 다룹니다. 사용자가 기존 게시글을 수정하거나 삭제할 수 있는 기능을 추가하고, 이를 API를 통해 서버와 통신하여 데이터를 처리합니다.

---

1. 게시글 수정 폼 구현

게시글 수정 기능을 구현하기 위해, 사용자가 기존 게시글의 내용을 수정할 수 있는 폼을 구성합니다. 수정 폼은 기존 게시글의 데이터를 불러와 사용자가 수정할 수 있도록 합니다.

게시글 수정 및 삭제 기능 을 구현한 과정

1.1 게시글 수정 폼 구성

// src/components/PostEditForm.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useParams } from 'react-router-dom';

function PostEditForm() {
  const { id } = useParams(); // URL에서 게시글 ID 가져오기
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  // 기존 게시글 데이터를 불러오기
  useEffect(() => {
    axios.get(`/api/posts/${id}`)
      .then((response) => {
        setTitle(response.data.title);
        setContent(response.data.content);
      })
      .catch((error) => console.error('Error fetching post:', error));
  }, [id]);

  const handleTitleChange = (e) => {
    setTitle(e.target.value);
  };

  const handleContentChange = (e) => {
    setContent(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    // 수정된 게시글 데이터를 서버로 전송
    axios.put(`/api/posts/${id}`, { title, content })
      .then(() => {
        alert('게시글이 성공적으로 수정되었습니다.');
      })
      .catch((error) => console.error('Error updating post:', error));
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>게시글 수정</h2>
      <div>
        <label>제목</label>
        <input
          type="text"
          value={title}
          onChange={handleTitleChange}
          required
        />
      </div>
      <div>
        <label>내용</label>
        <textarea
          value={content}
          onChange={handleContentChange}
          required
        ></textarea>
      </div>
      <button type="submit">수정</button>
    </form>
  );
}

export default PostEditForm;

1.2 코드 설명

• useParams: URL에서 게시글의 ID를 추출하여 수정할 게시글을 식별합니다.
• axios.get: 서버로부터 해당 게시글 데이터를 불러와 title과 content 상태로 설정합니다.
• axios.put: 수정된 게시글 데이터를 서버로 전송하여 업데이트합니다.

---

2. 서버에서 게시글 수정 기능 처리

백엔드에서는 Express.js를 사용하여 PUT 요청을 처리하고, MySQL에 저장된 게시글을 수정합니다.

// server.js
// 게시글 수정 API
app.put('/api/posts/:id', (req, res) => {
  const { id } = req.params;
  const { title, content } = req.body;

  // 데이터베이스에서 게시글 수정
  const query = 'UPDATE posts SET title = ?, content = ? WHERE id = ?';
  db.query(query, [title, content, id], (err, result) => {
    if (err) {
      return res.status(500).send('Error updating post');
    }
    res.send('Post updated successfully');
  });
});

---

3. 게시글 삭제 기능 추가

게시글 삭제 기능을 추가하여, 사용자가 게시글을 삭제할 수 있도록 합니다.

3.1 게시글 삭제 버튼 구현

게시글을 삭제하는 버튼을 구현하고, axios.delete 요청을 통해 서버에 삭제 요청을 보냅니다.

// src/components/PostItem.js
import React from 'react';
import axios from 'axios';

function PostItem({ post, onDelete }) {
  const handleDelete = () => {
    if (window.confirm('이 게시글을 삭제하시겠습니까?')) {
      axios.delete(`/api/posts/${post.id}`)
        .then(() => {
          alert('게시글이 삭제되었습니다.');
          onDelete(post.id); // 삭제 후 UI에서 해당 게시글 제거
        })
        .catch((error) => console.error('Error deleting post:', error));
    }
  };

  return (
    <li>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
      <button onClick={handleDelete}>삭제</button>
    </li>
  );
}

export default PostItem;

3.2 삭제된 게시글을 UI에서 제거

삭제 후, 삭제된 게시글을 리스트에서 제거하기 위해 부모 컴포넌트에서 onDelete 함수를 구현하여 상태를 업데이트합니다.

// src/components/PostList.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import PostItem from './PostItem';

function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios.get('/api/posts')
      .then((response) => setPosts(response.data))
      .catch((error) => console.error('Error fetching posts:', error));
  }, []);

  const handleDelete = (id) => {
    setPosts(posts.filter(post => post.id !== id)); // 삭제된 게시글을 리스트에서 제거
  };

  return (
    <div>
      <h1>게시글 목록</h1>
      <ul>
        {posts.map(post => (
          <PostItem key={post.id} post={post} onDelete={handleDelete} />
        ))}
      </ul>
    </div>
  );
}

export default PostList;

 

---

4. 서버에서 게시글 삭제 기능 처리

백엔드에서는 DELETE 요청을 처리하여 MySQL에서 해당 게시글을 삭제합니다.

// server.js
// 게시글 삭제 API
app.delete('/api/posts/:id', (req, res) => {
  const { id } = req.params;

  // 데이터베이스에서 게시글 삭제
  const query = 'DELETE FROM posts WHERE id = ?';
  db.query(query, [id], (err, result) => {
    if (err) {
      return res.status(500).send('Error deleting post');
    }
    res.send('Post deleted successfully');
  });
});

---

5. 수정 및 삭제 기능의 흐름

1. 게시글 수정:
   • 사용자가 수정할 게시글을 선택하면, 해당 게시글의 데이터를 폼에 불러옵니다.
   • 사용자가 수정한 내용을 제출하면 서버로 PUT 요청을 보내고, MySQL에서 해당 게시글을 수정합니다.
2. 게시글 삭제:
   • 사용자가 게시글을 삭제 버튼을 클릭하면 서버로 DELETE 요청을 보내고, MySQL에서 해당 게시글을 삭제합니다.
   • 삭제 후 UI에서도 해당 게시글을 리스트에서 제거합니다.

---

결론

이번 강의에서는 React와 Node.js를 사용하여 게시글 수정 및 삭제 기능을 구현하는 방법을 배웠습니다. 게시글 수정 폼을 구성하여 기존 게시글을 업데이트하고, 게시글 삭제 기능을 추가하여 데이터를 서버와 통신하며 관리할 수 있었습니다.