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

게시글 작성 화면 구현: 게시글 작성 폼 구성 및 서버로 전송하여 저장

이번 강의에서는 게시글 작성 화면을 구현하고, 작성된 게시글 데이터를 서버로 전송하여 저장하는 과정을 다룹니다. 사용자는 제목과 내용을 입력할 수 있으며, 작성된 게시글은 서버로 전송되어 데이터베이스에 저장됩니다.

React 웹 애플리케이션에서 게시글 작성 폼을 구현하고, 작성된 데이터를 서버로 전송하여 MySQL 데이터베이스에 저장하는 과정

---

1. 게시글 작성 폼 구성

게시글을 작성할 수 있는 폼을 구성합니다. 사용자가 제목과 내용을 입력하고, 서버로 전송할 수 있도록 구현합니다.

1.1 게시글 작성 폼 UI

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

function PostForm() {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

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

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

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

    // 게시글 데이터를 서버로 전송
    const postData = {
      title: title,
      content: content,
    };

    axios.post('/api/posts', postData)
      .then(() => {
        alert('게시글이 성공적으로 작성되었습니다.');
        setTitle(''); // 제목 초기화
        setContent(''); // 내용 초기화
      })
      .catch((error) => {
        console.error('Error creating 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 PostForm;

1.2 코드 설명

• useState: 제목(title)과 내용(content)을 각각의 상태로 관리합니다.
• handleSubmit: 사용자가 폼을 제출하면, 게시글 데이터를 서버로 전송합니다.
• axios.post: 입력된 데이터를 서버로 POST 요청을 통해 전송합니다.

---

2. 서버로 게시글 전송 및 저장

백엔드에서는 Express.js를 사용해 게시글 데이터를 받아 데이터베이스에 저장하는 API를 만듭니다.

2.1 게시글 저장 API 구현

// server/server.js
const express = require('express');
const db = require('./db');
const app = express();

app.use(express.json()); // JSON 데이터 처리를 위한 미들웨어

// 게시글 작성 API
app.post('/api/posts', (req, res) => {
  const { title, content } = req.body;

  // 데이터베이스에 게시글 저장
  const query = 'INSERT INTO posts (title, content) VALUES (?, ?)';
  db.query(query, [title, content], (err, result) => {
    if (err) {
      return res.status(500).send('Error saving post');
    }
    res.status(201).send('Post created successfully');
  });
});

// 서버 실행
const PORT = 5000;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

2.2 MySQL 테이블

posts 테이블은 title과 content 필드가 있으며, 데이터베이스에 게시글을 저장할 수 있도록 설정합니다.

CREATE TABLE posts (
  id INT AUTO_INCREMENT PRIMARY KEY,
  title VARCHAR(255),
  content TEXT,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

 

---

3. 폼 데이터 전송 흐름

게시글 작성 화면의 폼을 제출하면, axios를 통해 사용자가 입력한 제목과 내용을 서버로 전송합니다. 서버는 이 데이터를 받아 데이터베이스에 저장하고, 저장이 성공하면 클라이언트에 성공 메시지를 반환합니다.

3.1 데이터 흐름 요약

1. 사용자가 게시글 작성 폼을 채워 제출하면, POST 요청이 발생합니다.
2. axios.post를 통해 서버에 데이터를 전송합니다.
3. 서버는 데이터를 받아 MySQL에 저장합니다.
4. 저장 성공 시, 클라이언트는 성공 메시지를 표시합니다.

---

4. 폼 유효성 검사

폼이 제출되기 전에 제목과 내용이 비어 있지 않은지 확인하는 간단한 유효성 검사를 추가할 수 있습니다. HTML5의 required 속성을 이용해, 필수 입력 필드를 설정할 수 있습니다.

<input
  type="text"
  value={title}
  onChange={handleTitleChange}
  required
/>
<textarea
  value={content}
  onChange={handleContentChange}
  required
></textarea>

---

5. 데이터 전송 후 폼 초기화

게시글이 성공적으로 전송된 후, 작성 폼을 초기화하여 사용자가 다음 게시글을 작성할 수 있도록 설정합니다. 이를 위해, setTitle과 setContent 함수를 이용해 폼 필드를 초기화합니다.

setTitle(''); // 제목 초기화
setContent(''); // 내용 초기화

---

결론

이번 강의에서는 게시글 작성 화면을 구현하고, 작성된 게시글 데이터를 서버로 전송하여 MySQL 데이터베이스에 저장하는 과정을 다루었습니다. React의 폼 관리와 서버 API 통신을 통해 게시글 데이터를 처리하는 방법을 익힐 수 있었습니다.