다뤄야 할 내용
새로고침 시 데이터가 사라지지 않도록 유지하는 방법 학습
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 데이타 확인하기
반응형
'프로그래밍 > React' 카테고리의 다른 글
| React로 블로그 만들기 - 간단한 UI 구성 및 레이아웃 구성하기 (8) (0) | 2025.07.06 |
|---|---|
| React로 블로그 만들기 - json-server 사용 (REST API mock) (7) (0) | 2025.07.06 |
| React로 블로그 만들기 - 폼 컴포넌트 분리 및 재사용 (5) (0) | 2025.07.06 |
| React로 블로그 만들기 - 글 상세 보기 + 수정 기능 + 댓글 기능 구현 (4) (0) | 2025.07.06 |
| React로 블로그 만들기 - 글 데이터 상태 관리 (useState + Context) (3) (0) | 2025.07.06 |