React와 Node.js 방명록 개발(9): 삭제 기능과 페이징 구현

삭제 기능과 페이징 구현

내용 요약 및 학습 목표

1. 삭제 기능 구현
   • 상세보기 페이지에서 삭제 버튼을 통해 글을 삭제하는 기능 추가
   • 삭제 요청 후 목록 페이지로 이동하는 흐름 학습
2. 페이징 기능 구현
   • 글 목록에 페이지 번호 추가 및 페이지 전환 기능 구현
   • 백엔드 API에서 페이징 처리 설정
   • React Query를 사용해 페이지 데이터 패칭 및 페이지 전환 기능 구현

실습 세부 내용

1. 삭제 기능 구현: 글 상세보기에서 삭제 버튼 추가

• 삭제 요청 구현: Axios를 사용해 백엔드에 삭제 요청을 보내고, 성공 시 목록 페이지로 이동합니다.

// PostDetail.js
import React from 'react';
import { useParams, Link } from 'react-router-dom';
import { useQuery } from 'react-query';
import axios from 'axios';

const fetchPost = async (id) => {
  const { data } = await axios.get(`/api/posts/${id}`);
  return data;
};

const PostDetail = () => {
  const { id } = useParams();
  const { data, isLoading, error } = useQuery(['post', id], () => fetchPost(id));

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error occurred</div>;

  return (
    <div>
      <h2>{data.title}</h2>
      <p>작성자: {data.name}</p>
      <p>{data.message}</p>
      <p>작성시간: {new Date(data.created_at).toLocaleString()}</p>
      <Link to={`/edit/${id}`} className="btn btn-primary">수정하기</Link>
      <Link to="/" className="btn btn-secondary">목록으로</Link>
    </div>
  );
};

export default PostDetail;​

2. 페이징 기능 구현: 백엔드에서 페이징 처리 및 프론트엔드 페이지 전환 구현

1. 백엔드에서 페이징 처리 설정
   • 페이지당 게시글 수와 현재 페이지 번호를 기반으로 데이터를 페이징합니다.
   • 예시 URL: /api/posts?page=1&limit=10를 통해 페이지 번호와 데이터 수를 전달합니다.
2. 프론트엔드 페이징 기능 구현
   • React Query를 통해 현재 페이지의 데이터만 페칭하도록 설정합니다.
   • 페이지 번호 버튼을 통해 페이지 전환을 구현합니다.

// EditPost.js
import React, { useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useQuery, useMutation } from 'react-query';
import axios from 'axios';

const fetchPost = async (id) => {
  const { data } = await axios.get(`/api/posts/${id}`);
  return data;
};

const EditPost = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const { data, isLoading } = useQuery(['post', id], () => fetchPost(id));

  const [name, setName] = useState(data ? data.name : '');
  const [message, setMessage] = useState(data ? data.message : '');

  const mutation = useMutation(
    (updatedPost) => axios.put(`/api/posts/${id}`, updatedPost),
    {
      onSuccess: () => navigate(`/post/${id}`),
    }
  );

  const handleSubmit = (e) => {
    e.preventDefault();
    mutation.mutate({ name, message });
  };

  if (isLoading) return <div>Loading...</div>;

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>작성자:</label>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </div>
      <div>
        <label>메시지:</label>
        <textarea
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />
      </div>
      <button type="submit" className="btn btn-primary">저장</button>
      <button type="button" className="btn btn-secondary" onClick={() => navigate(-1)}>취소</button>
    </form>
  );
};

export default EditPost;

3. API 백엔드 예시 코드 (Node.js 및 Express)

// App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import PostList from './components/PostList';
import PostDetail from './components/PostDetail';
import EditPost from './components/EditPost';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<PostList />} />
        <Route path="/post/:id" element={<PostDetail />} />
        <Route path="/edit/:id" element={<EditPost />} />
      </Routes>
    </Router>
  );
}

export default App;

결론

이번 강의에서는 삭제 기능과 페이징 기능을 구현하며 React Query와 Axios를 사용해 데이터와 API 연동을 연습했습니다. 이를 통해 더 많은 데이터를 효율적으로 처리하고 관리할 수 있는 방법을 배웠습니다.