[Toy Projects] 'TODOoO' project (6)

다음은 삭제 기능이다.

삭제 버튼을 누르면 삭제의 여부를 묻도록 했다.

// component/Category.js

<p onClick={()=>{
  if(window.confirm("'" + todo[i].desc + "'을(를) 삭제하시겠습니까?")){
    onDelete(todo[i].id);
  }
}}>🗑</p>

onDelete는 App 컴포넌트로 부터 받은 props이며, onDelete를 통해 해당 key를 todo 객체에서 탐색하여 삭제할 수 있도록 했다.

 

// App.js

onDelete={(id)=>{
  let changeTodo = Array.from(todo);
  for(let i = 0; i < todo.length; i++){
    if(changeTodo[i].id === id){
      changeTodo.splice(i,1);
      break;
    }
  }
  setTodo(changeTodo);
}}

todo 객체를 changeTodo에 복제한 다음, 해당 id랑 같은 id를 탐색한 후, splice를 통해 삭제하고 todo 객체를 변경시켰다.

 

결과 화면

 

삭제 기능을 만들고 보니 오류가 있어서 고치게 됐다.

// App.js

onCreate={(data) => {
  let _id = todo[todo.length - 1].id;
  setTodo([...todo, {
    id:_id + 1,
    category: category[i],
    desc: data
  }]);
}}
onUpdate={(id, data)=>{
  let changeTodo = Array.from(todo);
  for(let i = 0; i < todo.length; i++){
    if(changeTodo[i].id === id){
      changeTodo[i].desc = data;
      break;
    }
  }
  setTodo(changeTodo);
}}

우선, onCreate에서 추가되는 todo 객체의 id값을 객체 내의 마지막 id값보다 1 큰 수로 설정하기 위해 length를 사용했지만, 삭제 기능으로 length와 마지막 id값이 달라질 수도 있기 때문이다.

 

그래서 마지막값의 id를 찾아서 1 증가한 값으로 추가시켰다.

 

두 번째로, onUpdate에서도 마찬가지로 length를 이용하여 값을 수정했지만, 역시 삭제 기능으로 lengh와 마지막 id값이 달라질 수도 있기 때문에 id 값으로 탐색한 다음 수정을 진행하였다.

 

 

전체 App.js

// App.js

import './App.css';
import Nav from './component/Nav';
import Category from './component/Category';
import { useEffect, useState } from 'react';

function App() {
  const [todo, setTodo] = useState([{
    id:0,
    category:'일반',
    desc:'할일1'
  },{
    id:1,
    category:'일반',
    desc:'할일2'
  },{
    id:2,
    category:'카테고리2',
    desc:'할일1'
  }]);
  const [category, setCategory] = useState(['일반','카테고리2']);
  const [cateForm, setCateForm] = useState([]);
  const [isOpen, setIsOpen] = useState('');

  useEffect(()=>{
    let _cateform = [];
    for(let i = 0; i < category.length; i++){
      let _todo = [];
      for(let j = 0; j < todo.length; j++){
        if(category[i] === todo[j].category){
          _todo.push({id:todo[j].id, desc:todo[j].desc});
        }
      }
      _cateform.push(
        <Category
          key={i}
          category={category[i]}
          todo={_todo}
          onCreate={(data) => {
            let _id = todo[todo.length - 1].id;
            setTodo([...todo, {
              id:_id + 1,
              category: category[i],
              desc: data
            }]);
          }}
          onUpdate={(id, data)=>{
            let changeTodo = Array.from(todo);
            for(let i = 0; i < todo.length; i++){
              if(changeTodo[i].id === id){
                changeTodo[i].desc = data;
                break;
              }
            }
            setTodo(changeTodo);
          }}
          onDelete={(id)=>{
            let changeTodo = Array.from(todo);
            for(let i = 0; i < todo.length; i++){
              if(changeTodo[i].id === id){
                changeTodo.splice(i,1);
                break;
              }
            }
            setTodo(changeTodo);
          }}
          isOpen={isOpen}
          setIsOpen={setIsOpen}
          ></Category>
      );
    }
    setCateForm(_cateform);
  },[category, todo, isOpen])
  return (
    <div className="app">
      <Nav
        category={category}
        setCategory={setCategory}
      ></Nav>
      {cateForm}
    </div>
  );
}

export default App;

 

전체 Category.js

// component/Category.js

import { useState, useEffect } from "react";
import Form from "./Form";

function Category(props) {
  const { category, todo, onCreate, onUpdate, onDelete, isOpen, setIsOpen } =
    props;
  const [isAdd, setIsAdd] = useState(false);
  const [todoForm, setTodoForm] = useState([]);
  const [isUpdate, setIsUpdate] = useState(-1);

  useEffect(() => {
    if (isOpen !== "" && isOpen !== category && (isAdd || isUpdate !== -1)) {
      setIsAdd(false);
      setIsUpdate(-1);
    }
  }, [isOpen]);

  useEffect(() => {
    isAdd && setIsOpen(category);
    isAdd && setIsUpdate(-1);
  }, [isAdd]);

  useEffect(() => {
    isUpdate !== -1 && setIsAdd(false);
    isUpdate !== -1 && setIsOpen(category);
  }, [isUpdate]);

  useEffect(() => {
    let _form = [];
    for (let i = 0; i < todo.length; i++) {
      _form.push(
        <div key={i}>
          <p>{todo[i].desc}</p>
          {isUpdate === i ? (
            <p
              onClick={() => {
                setIsUpdate(-1);
              }}
            >
              ×
            </p>
          ) : (
            <p
              onClick={() => {
                setIsUpdate(i);
              }}
            >
              ✎
            </p>
          )}
          <p
            onClick={() => {
              if (
                window.confirm("'" + todo[i].desc + "'을(를) 삭제하시겠습니까?")
              ) {
                onDelete(todo[i].id);
              }
            }}
          >
            🗑
          </p>
          {isUpdate === i ? (
            <Form
              type={2}
              setForm={setIsUpdate}
              onWrite={(data) => {
                onUpdate(todo[i].id, data);
              }}
              data={todo[i].desc}
            ></Form>
          ) : null}
        </div>
      );
    }
    setTodoForm(_form);
  }, [todo, isUpdate]);

  return (
    <div className="category">
      <div></div>
      <p>{category}</p>
      <p
        onClick={() => {
          setIsAdd(!isAdd);
        }}
      >
        {isAdd ? "×" : "+"}
      </p>
      <div>{todoForm}</div>
      {isAdd ? (
        <Form
          type={1}
          setForm={setIsAdd}
          onWrite={(data) => {
            onCreate(data);
          }}
          data={null}
        ></Form>
      ) : null}
    </div>
  );
}

export default Category;

 

 

 

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)