[리액트] 리액트로 todoList 만들기 ( #1_수정해야하는 부분있음)

 

 

app.js

 

import React, { useState } from "react";
import "./App.css";
import TodoItem from "./components/TodoItem";
// import todoDone from "./components/todoDone";

function App() {
  const [inputValue, setInputValue] = useState("");
  const [todoList, setTodoList] = useState([
    {
      id: 1,
      todoItem: "Test",
      isDone: false,
    },
    {
      id: 2,
      todoItem: "나의 버킷리스트",
      isDone: true,
    },
    {
      id: 3,
      todoItem: "리액트 장인되기!",
      isDone: true,
    },
  ]);

  const addItem = () => {
    console.log("addItem 실행, inputValue : ", inputValue);
    const newItem = {
      id: todoList.length + 1,
      todoItem: inputValue,
      isDone: false,
    };
    setTodoList([...todoList, newItem]);
  };

  const deleteItem = (id) => {
    console.log("넘겨받은 아이디:", id);
    const newTodoList = todoList.filter((todo) => todo.id !== id);
    setTodoList(newTodoList);
  };

  // 상태가 Done일때
  const onEditHandler = (todoId) => {
    const newTodos = todoList.map((todo) => {
      if (todo.id === todoId) {
        return {
          ...todo,
          isDone: !todo.isDone,
        };
      } else {
        return { ...todo };
      }
    });
    setTodoList(newTodos);
  };

  return (
    <div id="whole-body">
      <div id="inputAddBar">
        <br />
        <h2> 🎄 나의 TodoList 🎄 </h2>
        <input
          value={inputValue}
          type="text"
          onChange={(event) => setInputValue(event.target.value)}
        />
        <br />
        <button onClick={addItem} id="addBtn">
          Add my List!
        </button>

        <h4> * 완료버튼을 누르면 Working에서 사라집니다 * </h4>
      </div>

      <div id="todoListBody">
        <h2>Working</h2>

        <div className="list-wrapper">
          {todoList.map((todo) => {
            if (!todo.isDone) {
              return (
                <TodoItem
                  todoList={todo}
                  deleteItem={deleteItem}
                  onEditHandler={onEditHandler}
                />
              );
            } else {
              return null;
            }
          })}
        </div>

        {/* <div className="list-wrapper">
          {todoList.map((todo) => {
            if (!todo.isDone) {
              return (
                <TodoItem
                  todoList={todo}
                  deleteItem={deleteItem}
                  onEditHandler={onEditHandler}
                />
              );
            } else {
              return null;
            }
          })}
        </div> */}
        {/*  */}
      </div>

      <h2>Done</h2>
      <div className="list-wrapper">
        {todoList.map((a) => {
          return (
            <TodoItem
              todoList={a}
              deleteItem={deleteItem}
              onEditHandler={onEditHandler}
            ></TodoItem>
          );
        })}
      </div>
    </div>
  );
}

export default App;

// import React, { useState } from "react";
// import "./App.css";
// import TodoItem from "./components/TodoItem";

// function App() {
//   const [inputValue, setInputValue] = useState("");
//   const [todoList, setTodoList] = useState([
//     {
//       id: 1,
//       todoItem: "Test",
//     },
//   ]);

//   const addItem = () => {
//     console.log("addItem 실행, inputValue : ", inputValue);
//     const newItem = {
//       id: todoList.length + 1,
//       todoItem: inputValue,
//     };
//     setTodoList([...todoList, newItem]);
//   };

//   const deleteItem = (id) => {
//     console.log("넘겨받은 아이디:", id);
//     const newTodoList = todoList.filter((todo) => todo.id !== id);
//     setTodoList(newTodoList);
//   };

//   return (
//     <div id="whole-body">
//       <div id="inputAddBar">
//         <br />
//         <h2> 🎄 나의 TodoList 🎄 </h2>
//         <input
//           value={inputValue}
//           type="text"
//           onChange={(event) => setInputValue(event.target.value)}
//         />
//         <br />
//         <button onClick={addItem} id="addBtn">
//           Add my List!
//         </button>
//       </div>

//       <div id="todoListBody">
//         {todoList.map((a) => {
//           return <TodoItem todoList={a} deleteItem={deleteItem}></TodoItem>;
//         })}
//       </div>
//     </div>
//   );
// }

// export default App;

 

todoItem.js

 

import React from "react";

function TodoItem(props) {
  console.log("props:", props);
  return (
    <div>
      <div>
        <div id="todoList">
          🟡 {props.todoList.todoItem}
          <button
            id="deleteBtn"
            onClick={() => {
              props.deleteItem(props.todoList.id);
            }}
          >
            삭제
          </button>
          <button
            className="todo-complete-button button"
            onClick={() => props.onEditHandler(props.todoList.id)}
          >
            {props.todoList.isDone ? "취소" : "완료"}
          </button>
        </div>
      </div>
    </div>
  );
}

export default TodoItem;

// import React from "react";

// function TodoItem(props) {
//   console.log("props:", props);

//   return (
//     <div>
//       <div id="todoList">
//         🟡 {props.todoList.id} - {props.todoList.todoItem}
//         <button
//           id="deleteBtn"
//           onClick={() => {
//             props.deleteItem(props.todoList.id);
//           }}
//         >
//           삭제
//         </button>
//       </div>
//     </div>
//   );
// }

// export default TodoItem;

 

app.css

 

@import url("https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap");

#whole-body {
  width: 400px;
  height: 800px;
  margin: 0 auto;
  text-align: center;
  font-family: "Gowun Dodum", sans-serif;
  background-color: #161853;
  color: #faedf0;
}

input {
  width: 250px;
  height: 40px;
  font-family: "Gowun Dodum", sans-serif;
}

#addBtn {
  margin-top: 25px;
  width: 100px;
  height: 27px;
  background-color: #4e9525;
  color: yellow;
  font-weight: 800;
  border: none;
  border-radius: 5px;
  transition: all 0.5s;
}

#addBtn:hover {
  background-color: rgb(225, 79, 120);
  color: white;
}

#todoList {
  height: 30px;
  margin: 0 auto;
  font-size: 20px;
  padding: 5px;
  text-align: left;
  border-bottom: 3px double white;
}

#todoListBody {
  width: 300px;
  margin: 0 auto;
  margin-top: 20px;
}

#deleteBtn {
  background-color: rgb(188, 45, 100);
  border: none;
  color: white;
  border-radius: 7px;
  font-size: 12px;
  color: white;
  font-weight: 900;
  font-family: "Gowun Dodum", sans-serif;
  float: right;
  margin-top: 3px;
  height: 23px;
}

.todo-complete-button {
  margin-right: 5px;
  background-color: green;
  border: none;
  color: white;
  border-radius: 7px;
  font-size: 12px;
  color: white;
  font-weight: 900;
  font-family: "Gowun Dodum", sans-serif;
  float: right;
  margin-top: 3px;
  height: 23px;
}

.list-wrapper {
  width: 300px;
  margin: 0 auto;
}