✅ React 기초 강좌

🎯 학습 목표

• localStorage에서 초기 데이터를 불러오고
• 상태가 변경될 때마다 localStorage에 저장하는 로직을 구현한다.
• JSON 문자열 ↔ 객체 변환(JSON.stringify, JSON.parse)을 활용한다.

📦 적용 위치

📁 src/context/TodoProvider.jsx

→ todos 상태를 localStorage에 저장하고 불러오는 기능 추가

📄 수정된 TodoProvider.jsx

import { useEffect, useState } from 'react';
import { TodoContext } from './TodoContext';

function TodoProvider({ children }) {
  const LOCAL_KEY = 'my_todos';

  const [todos, setTodos] = useState(() => {
    const saved = localStorage.getItem(LOCAL_KEY);
    return saved ? JSON.parse(saved) : [];
  });

  const [text, setText] = useState('');

  const handleAdd = () => {
    const trimmed = text.trim();
    if (!trimmed) return;

    const newTodo = {
      id: Date.now(),
      content: trimmed,
      isDone: false,
    };
    setTodos([newTodo, ...todos]);
    setText('');
  };

  const handleDelete = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  const handleToggle = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, isDone: !todo.isDone } : todo
      )
    );
  };

  // ✅ todos 변경 시 localStorage에 저장
  useEffect(() => {
    localStorage.setItem(LOCAL_KEY, JSON.stringify(todos));
  }, [todos]);

  return (
    <TodoContext.Providervalue={{
        todos,
        text,
        setText,
        handleAdd,
        handleDelete,
        handleToggle,
      }}
    >
      {children}
    </TodoContext.Provider>
  );
}

export default TodoProvider;

✅ 핵심 요약

🔁 앱 사용 흐름

• 새로고침해도 할 일 목록이 유지됨
• 삭제해도 반영되고, 체크도 반영됨
• 브라우저에 데이터가 남기 때문에 간단한 메모 앱으로도 활용 가능

✍️ 과제

아래 확장 기능 중 하나를 구현해보세요:

1. 로컬스토리지에 저장된 데이터 초기화 버튼 만들기

   → localStorage.removeItem() 또는 setTodos([]) 활용

2. (선택) 완료된 항목만 보기 / 미완료 항목 보기 등 필터 기능

https://github.com/heroyooi/react-app/tree/ch5_5