React로 블로그 만들기 - 데이터 저장 유지 – localStorage (6)

다뤄야 할 내용

새로고침 시 데이터가 사라지지 않도록 유지하는 방법 학습

 

localStorage 사용하기

PostContext 수정

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

export const PostContext = createContext();

export function PostProvider({ children }) {
  const [posts, setPosts] = useState(() => {
    const saved = localStorage.getItem('posts');
    return saved ? JSON.parse(saved) : [];
  });

  useEffect(() => {
    localStorage.setItem('posts', JSON.stringify(posts));
  }, [posts]);

  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>
  );
}

 

핵심 1

import { createContext, useState, useEffect } from "react";

-> useEffect 추가

 

핵심 2

  const [posts, setPosts] = useState(() => {
    const saved = localStorage.getItem('posts');
    return saved ? JSON.parse(saved) : [];
  });

-> localStorage 에서 posts 데이타 불러오기

 

핵심 3

  useEffect(() => {
    localStorage.setItem('posts', JSON.stringify(posts));
  }, [posts]);

-> posts 데이타가 변경되면 localStorage posts 변수에 저장하기

 

실행하기

npm run dev

 

로컬 스토리에서 데이타 확인하기

1. Chrom 개발자도구 (cmd+option+i) 열기

2. 어플리캐이션 > 로컬 스토리지 > posts 데이타 확인하기