[React] 간단한 게시판 만들기.

React 로 간단한 게시판을 만들겠습니다. 

 

먼저, 간단한 게시판의 기본 구조를  파악해봅니다.

1. 게시글 목록표시

2. 새 게시글 작성 폼

3. 게시글 삭제 기능 

import React, { useState } from 'react';

const SimpleBoard = () => {
  const [posts, setPosts] = useState([]);
  const [newPost, setNewPost] = useState({ title: '', content: '' });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setNewPost({ ...newPost, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (newPost.title && newPost.content) {
      setPosts([...posts, { ...newPost, id: Date.now() }]);
      setNewPost({ title: '', content: '' });
    }
  };

  const handleDelete = (id) => {
    setPosts(posts.filter(post => post.id !== id));
  };

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">간단한 게시판</h1>
      
      <form onSubmit={handleSubmit} className="mb-4">
        <input
          type="text"
          name="title"
          value={newPost.title}
          onChange={handleInputChange}
          placeholder="제목"
          className="w-full p-2 mb-2 border rounded"
        />
        <textarea
          name="content"
          value={newPost.content}
          onChange={handleInputChange}
          placeholder="내용"
          className="w-full p-2 mb-2 border rounded"
        />
        <button type="submit" className="bg-blue-500 text-white p-2 rounded">게시하기</button>
      </form>

      <div>
        {posts.map(post => (
          <div key={post.id} className="bg-gray-100 p-4 mb-2 rounded">
            <h2 className="font-bold">{post.title}</h2>
            <p>{post.content}</p>
            <button onClick={() => handleDelete(post.id)} className="text-red-500 mt-2">삭제</button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default SimpleBoard;

 

이 코드에 대해서 간단히 설명하면 다음과 같습니다. 

 

1. 상태관리 : React 에서 '상태(state)'는 컴포넌트가 기억하고 있는 데이터입니다. 

const [posts, setPosts] = useState([]);
const [newPost, setNewPost] = useState({ title: '', content: '' });

post : 모든 글을 담고 있는 배열

newPost : 사용자가 현재 작성 중인 새 게시글의 정보를 담고 있는 배열

 

2. 입력처리 : 사용자가 제목이나 내용을 입력할때마가 이 함수가 호출됩니다.

const handleInputChange = (e) => {
  const { name, value } = e.target;
  setNewPost({ ...newPost, [name]: value });
};

이 함수는 입려필드의 이름(name) 과 값( value)을 가져와서 newPost 상태를 업데이트합니다.

 

3. 게시글 추가 : 사용자가 '게시하기'버튼을 클릭하면 이 함수 가 호출 됩니다.

const handleSubmit = (e) => {
  e.preventDefault();
  if (newPost.title && newPost.content) {
    setPosts([...posts, { ...newPost, id: Date.now() }]);
    setNewPost({ title: '', content: '' });
  }
};

이 함수는 새 게시글을 posts 배열에 추가하고, 입력필드를 초기화 합니다.

 

4. 게시글 삭제: 각 게시글 옆의 '삭제' 버튼을 클릭하면 이 함수가 실행됩니다.

const handleDelete = (id) => {
  setPosts(posts.filter(post => post.id !== id));
};

 

5. 랜더링 : 컴포넌트의  return부분에서 실제 화면에 표시될 내용을 정의합니다.

• 먼저 제목과 내용을 입력할수 있는 폼을 만듭니다.
• 그 다음, posts 배열의 각 게시글을 화면에 표시합니다.