✅ React 기초 강좌

🎯 목표

사용자가 버튼을 클릭하면 할 일 목록이 모두 삭제되고,

localStorage와 상태가 동시에 초기화되도록 기능을 추가하세요.

📌 기능 명세

🧩 구현 예시 (Context 사용 시 기준)

// App.jsx
import TodoProvider from './context/TodoProvider';
import TodoForm from './components/TodoForm';
import TodoItem from './components/TodoItem';
import { useTodoContext } from './context/TodoContext';

function TodoList() {
  const { todos, handleToggle, handleDelete } = useTodoContext();

  return (
    <ul style={{ listStyle: 'none', padding: 0 }}>
      {todos.map((todo) => (
        <TodoItem key={todo.id}
          todo={todo}
          onToggle={handleToggle}
          onDelete={handleDelete}
        />
      ))}
    </ul>
  );
}

function App() {
  const { todos, setTodos } = useTodoContext();

  const handleClearAll = () => {
    localStorage.removeItem('my_todos'); // localStorage 비우기
    setTodos([]);                        // 상태 비우기
  };

  return (
    <div style={{ padding: '30px' }}>
      <h1>📘 Todo 리스트</h1>
      <TodoForm />
      <TodoList />
      <p>총 {todos.length}개의 할 일이 있습니다.</p>
      <button onClick={handleClearAll}>🧹 전체 삭제</button>
    </div>
  );
}

export default function RootApp() {
  return (
    <TodoProvider>
      <App />
    </TodoProvider>
  );
}

• TodoProvider에서 setTodos를 value에 꼭 포함시킵니다.

<TodoContext.Provider
  value={{
    todos,
    setTodos, // ✅ 이게 없으면 외부에서 초기화 불가능
    ...
  }}
>

✅ 과제 요약

• 버튼 추가: 전체 삭제 버튼 UI 만들기
• 로컬스토리지 삭제: localStorage.removeItem('my_todos')
• 상태 초기화: setTodos([])
• 클릭 시 둘 다 동시에 작동

GitHub - heroyooi/react-app at ch5_5_resolve