React로 블로그 만들기 - 글 데이터 상태 관리 (useState + Context) (3)

다뤄야 할 내용

• React의 useState를 사용해 글 데이터를 메모리에 저장하고 관리합니다.
• useContext와 createContext를 사용해 글 데이터를 전역 상태로 공유합니다.
• 글 작성 폼을 만들고 새 글을 추가할 수 있도록 합니다.

---

더미 데이터 만들기

src/data/initialPosts.js

// src/data/initialPosts.js
const initialPosts = [
  { id: 1, title: "첫 번째 글", content: "안녕하세요!" },
  { id: 2, title: "두 번째 글", content: "React는 재밌어요." }
];

export default initialPosts;

 

 

Context 만들기 - 전역 데이타 다루기

// src/context/PostContext.jsx
import { createContext, useState } from 'react';
import initialPosts from '../data/initialPosts';

export const PostContext = createContext();

export function PostProvider({ children }) {
  const [posts, setPosts] = useState(initialPosts);

  const addPost = (title, content) => {
    const newPost = {
      id: Date.now(),
      title,
      content,
    };
    setPosts([newPost, ...posts]);
  };

  const updatePost = (id, title, content) => {
    setPosts(posts.map(p => (p.id === id ? { ...p, title, content } : p)));
  };

  return (
    <PostContext.Provider value={{ posts, addPost, updatePost }}>
      {children}
    </PostContext.Provider>
  );
}

-> 패턴화되어 있다.

 

App.jsx에서 전역 데이타 Provider 적용시키기

// src/App.jsx
import Router from './routes/Router';
import { PostProvider } from './context/PostContext';

function App() {
  return (
    <PostProvider>
      <Router />
    </PostProvider>
  );
}

export default App;

-> 라우터를 감싸고 라우터에 전역데이타를 공급한다.

 

글 작성 페이지 (WritePage.jsx)

src/pages/WritePage.jsx

// src/pages/WritePage.jsx
import { useContext, useState } from 'react';
import { PostContext } from '../context/PostContext';
import { useNavigate } from 'react-router-dom';

function WritePage() {
  const { addPost } = useContext(PostContext);
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const navigate = useNavigate();

  const handleSubmit = e => {
    e.preventDefault();
    if (!title.trim() || !content.trim()) return;
    addPost(title, content);
    navigate('/');
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>글 작성</h2>
      <input
        type="text"
        placeholder="제목"
        value={title}
        onChange={e => setTitle(e.target.value)}
      />
      <br />
      <textarea
        placeholder="내용"
        value={content}
        onChange={e => setContent(e.target.value)}
      />
      <br />
      <button type="submit">등록</button>
    </form>
  );
}

export default WritePage;

 

글 목록 페이지 (HomePage.jsx)

src/pages/HomePage.jsx

// src/pages/HomePage.jsx
import { useContext } from 'react';
import { PostContext } from '../context/PostContext';
import { Link } from 'react-router-dom';

function HomePage() {
  const { posts } = useContext(PostContext);

  return (
    <div>
      <h2>글 목록</h2>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <Link to={`/post/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default HomePage;

 

실행하기

npm run dev