#17 react-todo-app : save localstorage

react/todo-app/src/App.js

@@ -4,26 +4,18 @@ import Form from "./components/Form";
 import Lists from "./components/Lists";
 
 const App = () => {
-  console.log("App component");
+  const initTodoData = localStorage.getItem("todoData")
+    ? JSON.parse(localStorage.getItem("todoData"))
+    : [];
 
-  const [todoData, setTodoData] = useState([
-    {
-      id: "1",
-      title: "공부하기",
-      completed: true,
-    },
-    {
-      id: "2",
-      title: "청소기",
-      completed: false,
-    },
-  ]);
+  const [todoData, setTodoData] = useState(initTodoData);
   const [value, setValue] = useState("");
 
   const handleClick = useCallback(
     (id) => {
       let newTodoData = todoData.filter((data) => data.id !== id);
       setTodoData(newTodoData);
+      localStorage.setItem("todoData", JSON.stringify(newTodoData));
     },
     [todoData]
   );
@@ -38,11 +30,14 @@ const App = () => {
     };
 
     setTodoData((prev) => [...prev, newTodo]);
+    localStorage.setItem("todoData", JSON.stringify([...todoData, newTodo]));
+
     setValue("");
   };
 
   const handleRemoveClick = () => {
     setTodoData([]);
+    localStorage.setItem("todoData", JSON.stringify([]));
   };
 
   return (

react/todo-app/src/components/Form.js

@@ -1,8 +1,6 @@
 import React from "react";
 
 const Form = ({ value, setValue, handleSubmit }) => {
-  console.log("Form component");
-
   const handleChange = (e) => {
     setValue(e.target.value);
   };

react/todo-app/src/components/List.js

@@ -22,6 +22,7 @@ const List = ({
     });
 
     setTodoData(newTodoData);
+    localStorage.setItem("todoData", JSON.stringify(newTodoData));
   };
 
   const handleEditChange = (e) => {
@@ -39,6 +40,8 @@ const List = ({
     });
 
     setTodoData(newTodoData);
+    localStorage.setItem("todoData", JSON.stringify(newTodoData));
+
     setIsEditing(false);
   };
 
@@ -87,8 +90,8 @@ const List = ({
         <div className="items-center">
           <input
             type={"checkbox"}
-            defaultChecked={false}
             onChange={() => handleCompleteChange(id)}
+            checked={completed}
           />{" "}
           <span className={completed ? "line-through" : undefined}>
             {title}

react/todo-app/src/components/Lists.js

@@ -3,8 +3,6 @@ import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
 import List from "./List";
 
 const Lists = ({ todoData, setTodoData, handleClick }) => {
-  console.log("Lists component");
-
   const handleEnd = (result) => {
     if (!result.destination) return;
 
@@ -15,6 +13,7 @@ const Lists = ({ todoData, setTodoData, handleClick }) => {
     newTodoData.splice(result.destination.index, 0, reorderedItem);
 
     setTodoData(newTodoData);
+    localStorage.setItem("todoData", JSON.stringify(newTodoData));
   };
 
   return (