[React] todolist 구현완성본

미루고미루던 todolist 추가삭제수정 기능 다 구현했다 

 

App.js

import { useState } from "react";
import TodoList from "./TodoList";

function App() {
  const [addValue, setAddvalue] = useState("");

  const [todos, setTodos] = useState([
    { id: 1, text: "잠자기", checked: true },
    { id: 2, text: "밥먹기", checked: true },
    { id: 3, text: "책보기", checked: false },
  ]);
  const handleAdd = () => {
    const todo = { id: todos.length + 1, text: addValue, checked: false };
    setTodos([...todos, todo]);
    setAddvalue("");
  };
  const handleDelete = id => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div>
      <h4>todolist 만들어보자 우헤헤헤</h4>
      <input
        type="text"
        placeholder="할일을 입력하세요"
        value={addValue}
        onChange={e => setAddvalue(e.target.value)}
      />
      <button onClick={handleAdd}>추가</button>
      <hr></hr>
      <TodoList todos={todos} SetTodos={setTodos} handleDelete={handleDelete} />
    </div>
  );
}

export default App;

 

 

TodoList.js

import { useState } from "react";
import Oneitem from "./Oneitem";

function TodoList({ todos, handleDelete, handleUpdate, SetTodos }) {
  //console.log(todos);
  const [todo, setTodo] = useState();

  return (
    <div>
      {todos.map(todo => {
        return (
          <Oneitem
            todo={todo}
            SetTodos={SetTodos}
            key={todo.id}
            handleDelete={handleDelete}
            todos={todos}
            setTodo={setTodo}
          />
        );
      })}
    </div>
  );
}
export default TodoList;

 

Oneitem.js

import { BiCheckboxChecked, BiCheckbox, BiSolidPencil } from "react-icons/bi";
import { LuPlusCircle } from "react-icons/lu";
import { FaRegTrashCan } from "react-icons/fa6";
import styled from "styled-components";
import { useState } from "react";

const ListDesign = styled.div`
  display: flex;
  flex-direction: row;

  .deletebtn {
    cursor: pointer;
  }
`;

function Oneitem({ todo, handleDelete, SetTodos, todos }) {
  const { id, text, checked } = todo;
  const [editClicked, setEditClicked] = useState(false);
  const [editValue, setEditValue] = useState(todo.text);

  //연필모양누르면 수정모드로 바뀐다.
  const handleMode = id => {
    setEditClicked(!editClicked);
  };
  const handleUpdate = id => {
    setEditClicked(!editClicked);
    //editValue는 수정된 내용이고 todo.text는 원래 내용이다.
    setEditValue(editValue);
    SetTodos(todos =>
      todos.map(todo => (todo.id === id ? { ...todo, editValue } : todo))
    );
    //console.log(editValue);
  };

  return (
    <ListDesign>
      <div>{checked ? <BiCheckboxChecked /> : <BiCheckbox />}</div>
      {/* 여기 text부분이 상태에 따라 다르게 보이게 해야할거같다. true면 수정창이 보이고 false면 text보이게 */}
      <div>
        {editClicked ? (
          <div>
            <input
              type="text"
              value={editValue}
              onChange={e => setEditValue(e.target.value)}
            />
            <LuPlusCircle onClick={() => handleUpdate(id)} />
            <FaRegTrashCan onClick={() => handleDelete(id)} />
          </div>
        ) : (
          <div>
            {editValue}
            <BiSolidPencil onClick={() => handleMode(id)} />
            <FaRegTrashCan onClick={() => handleDelete(id)} />
          </div>
        )}
      </div>
    </ListDesign>
  );
}
export default Oneitem;