React와 Node.js 방명록 개발(7): 방명록 작성 및 목록 페이지 구현

방명록 작성 및 목록 페이지 구현

내용 요약 및 학습 목표

1. 글 작성 페이지 구현하기
   • 입력 폼과 저장/취소 버튼을 추가하여 사용자가 메시지와 작성자명을 입력할 수 있도록 설정
   • Redux와 React Query를 사용하여 서버와 연동
2. 글 목록 페이지 구현하기
   • 작성된 글을 리스트 형식으로 출력
   • 제목을 클릭하면 상세보기 페이지로 이동할 수 있도록 링크 설정
3. Redux와 React Query로 서버 데이터 연동하기
   • Redux와 React Query를 활용해 글 작성과 목록 데이터를 서버와 연동하여 실시간으로 표시

실습 세부 내용

1. 글 작성 페이지 구현: 입력 폼과 저장/취소 버튼 추가 (src/components/WriteForm.js)
   • Form 컴포넌트 생성: 사용자가 입력한 글을 서버로 전송하기 위해 form을 구현합니다.
   • Redux 상태 관리: 입력된 데이터가 저장될 Redux 상태를 정의합니다.
   • Redux와 React Query 연동: 작성된 글을 API로 전송하고 저장된 데이터를 불러옵니다.

     import React, { useState } from 'react';
     import { useMutation } from 'react-query';
     import axios from 'axios';
     
     const WriteForm = () => {
       const [name, setName] = useState('');
       const [message, setMessage] = useState('');
     
       const mutation = useMutation(newPost => axios.post('http://localhost:5000/api/guestbook', newPost));
     
       const handleSubmit = (e) => {
         e.preventDefault();
         mutation.mutate({ name, message });
       };
     
       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">저장</button>
           <button type="button" onClick={() => { setName(''); setMessage(''); }}>취소</button>
         </form>
       );
     };
     
     export default WriteForm;

    
2. 글 목록 페이지 구현: 작성된 글을 리스트 형식으로 출력하기(src/components/PostList.js)
   • 목록 데이터 가져오기: React Query를 사용해 작성된 글 목록을 서버에서 불러옵니다.
   • URL Routing: URLRouting을 위해 react-router-dom을 설치합니다.

     npm install react-router-dom
     또는
     npm install react-router-dom  --legacy-peer-deps

   • 목록 UI 구성: 리스트 형식으로 각 글의 제목과 작성자명을 출력하고, 제목을 클릭하면 상세보기로 이동할 수 있도록 설정합니다.

     import React from 'react';
     import { useQuery } from 'react-query';
     import axios from 'axios';
     import { Link } from 'react-router-dom';
     
     const fetchPosts = async () => {
       const { data } = await axios.get('http://localhost:5000/api/guestbook');
       return data;
     };
     
     const PostList = () => {
       const { data, isLoading, error } = useQuery('posts', fetchPosts);
     
       if (isLoading) return <div>Loading...</div>;
       if (error) return <div>Error occurred</div>;
     
       return (
         <ul>
           {data.map(post => (
             <li key={post.id}>
               <Link to={`http://localhost:5000/api/guestbook/${post.id}`}>
                 {post.title}
               </Link>
               <p>작성자: {post.name}</p>
             </li>
           ))}
         </ul>
       );
     };
     
     export default PostList;

    
3. Redux와 React Query를 통해 서버 데이터 연동하기
   • Redux Slice 정의: 작성된 글 데이터를 관리할 Redux Slice를 정의합니다.
   • React Query 데이터 패칭: 서버에서 데이터 상태를 가져오는 패칭을 구현해 글 목록 페이지에 적용합니다.
   • 리덕스와 쿼리 동기화: Redux와 React Query를 결합하여 작성 및 삭제 시 데이터가 자동으로 갱신되도록 설정합니다.

 

guestbook-app/
├── public/
│   └── index.html
├── src/
│   ├── api/
│   │   └── postsApi.js          // API 요청을 관리하는 파일
│   ├── components/
│   │   ├── WriteForm.js         // 글 작성 폼 컴포넌트
│   │   └── PostList.js          // 글 목록 컴포넌트
│   ├── features/
│   │   └── posts/
│   │       └── postsSlice.js    // Redux Slice 파일
│   ├── App.js                   // 메인 앱 컴포넌트
│   ├── index.js                 // React 진입점 파일
│   └── setupProxy.js            // 프록시 설정 파일 (백엔드 연결용)
└── package.json

 

결론

이 강의에서는 방명록의 글 작성 및 목록 페이지를 구현하면서 Redux와 React Query를 통해 상태 관리와 데이터 연동을 학습했습니다. 이제 사용자가 작성한 글을 실시간으로 서버에 저장하고 불러와서 표시하는 전체 흐름을 이해하게 됩니다.