React와 Node.js 방명록 개발(8): 상세보기 및 수정 페이지 구현

React

React와 Node.js 방명록 개발(8): 상세보기 및 수정 페이지 구현

atomicdev 2024. 11. 2. 12:40

728x90

상세보기 및 수정 페이지 구현

내용 요약 및 학습 목표

상세보기 페이지 구현
- 특정 글의 내용을 확인하는 상세보기 페이지 구현
- 글의 작성 내용, 작성자명, 작성 시간 등을 표시
- React Query를 통해 특정 글의 데이터를 API로부터 가져오기
글 수정 페이지 구현
- 글 수정 페이지에서 기존 내용을 수정할 수 있도록 구현
- 작성 내용, 작성자명 등 기존 데이터를 폼에 채워서 수정 가능
- 수정 후 저장/취소 버튼으로 데이터 반영 및 페이지 이동 설정
React Router로 페이지 라우팅 설정
- React Router를 사용해 상세보기와 수정 페이지로 이동
- 각 페이지 간의 데이터 연동 설정하여 UX 개선

실습 세부 내용

상세보기 페이지 구현: 글 내용, 작성자, 작성시간 표시

데이터 패칭: React Query를 사용해 특정 글의 데이터를 가져옵니다.

상세보기 UI: 글의 작성 내용, 작성자, 작성 시간을 표시하는 UI를 구성합니다.

// 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(`http://localhost:5000/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;

글 수정 페이지 구현: 기존 글을 수정할 수 있는 폼과 저장/취소 버튼

수정 페이지 UI: 기존 글의 데이터를 불러와서 수정 가능한 폼을 만듭니다.
수정 API 연동: 사용자가 수정한 데이터를 서버에 업데이트하도록 설정합니다.

취소 기능: 사용자가 수정 작업을 취소할 수 있는 버튼을 추가합니다.

// 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(`http://localhost:5000/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(`http://localhost:5000/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;

React Router로 페이지 라우팅 설정

라우터 설정: React Router에서 상세보기와 수정 페이지로 이동할 수 있도록 설정합니다.

라우팅 적용: Link 컴포넌트를 사용해 글 목록에서 상세보기 페이지로, 상세보기에서 수정 페이지로 이동을 설정합니다.

// App.js
import React from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import PostList from './components/PostList';
import WriteForm from './components/WriteForm';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <h1>Guestbook</h1>
        <WriteForm />
        <PostList />
      </div>
    </QueryClientProvider>
  );
}

export default App;

결론

이번 강의에서는 방명록의 상세보기와 수정 페이지를 구현하며, React Router를 통해 페이지 간 이동과 데이터 연동을 학습했습니다. React Query와 Redux를 함께 사용하여 데이터의 실시간 업데이트를 구현했으며, 이를 통해 더 완성도 높은 웹 애플리케이션을 구축할 수 있었습니다.

728x90