[React-porject Todo-app] 일정 완료하기, 일정 삭제하기

 

일정 완료하기

완료 버튼을 클릭하면 일정이 done리스트로 이동한다.

 

/**
   * 완료버튼을 누르면 상태를 done으로 바꿔주고 취소버튼을 누르면 완료를 취소하는 함수
   */
  const doneEvent = (id) => {
    let listMap = todoList.map((x) => {
      // 리스트의 id와 매개변수로 들어온 id가 같은 요소를 변경하는데 만약 id가 같은 리스트의 status가
      // false라면 true로 바꾸고 true라면 false로 바꾼다
      return x.id === id ? x.status === true ? { ...x, status: false } : { ...x, status: true } : x;
    });
    setTodoList([...listMap]);
  };

리스트의 id를 매개변수로 받아서 매개변수 id와 todoList의 id가 같은 리스트요소를 변경한다.

변경하는 부분은 status이고 만약 status가 false이면 true로 변경하고 true이면 false로 변경한다.

 

 

working리스트와 done리스트

 

status가 false면 working리스트에 출력하고 status가 true면 done리스트에 출력한다.

<div className="working_box">
            <div>Working</div>

            <ul>
              {todoList
                .filter((item) => {
                  return item.status === false;
                })
                .map((item) => {
                  return (
                    <TodoList
                      key={item.id}
                      item={item}
                      doneEvent={doneEvent}
                      deleteList={deleteList}
                      modalListRead={modalListRead}
                    />
                  );
                })}
            </ul>
          </div>
          <div className="done_box">
            <div>Done</div>
            <ul>
              {todoList
                .filter((item) => {
                  return item.status === true;
                })
                .map((item) => {
                  return (
                    <TodoList
                      key={item.id}
                      item={item}
                      doneEvent={doneEvent}
                      deleteList={deleteList}
                      modalListRead={modalListRead}
                    />
                  );
                })}
            </ul>
          </div>

filter함수를 통해 status가 false인 리스트는 working리스트로, status가 true인 리스트는 done리스트로 나누어서 각각 map 함수를 통해 리스트를 반복하여 출력하였다. 

 

todo리스트는 컴포넌트를 분리해서 따로 관리하엿다.

import React from "react";
import Button from "./Button";

const TodoList = ({ item, doneEvent, deleteList, modalListRead }) => {
  return (
    <li key={item.id}>
      <div className="todo_content">
        <p className="title">{item.title}</p>
        <p
          className="content_text"
          onClick={() => {
            modalListRead(item.id);
          }}
        >
          {item.content}
        </p>
      </div>
      <div className="btn_box">
        {item.status === false
        ?<Button doneEvent={doneEvent} id={item.id}>
        완료
      </Button>
        :<Button doneEvent={doneEvent} id={item.id}>
        취소
      </Button>
        }
        <Button deleteList={deleteList} id={item.id}>삭제</Button>
      </div>
    </li>
  );
};

export default TodoList;

삼항 연산자를 이용하여 working리스트에는 완료버튼이 출력되고 done리스트에는 취소버튼이 출력된다.

 

 

 

 

 

일정 삭제하기

삭제하기 버튼을 클릭하면 일정이 삭제된다.

 /**
   * 리스트를 삭제하는 함수
   */
  const deleteList = (id) => {
    let listFil = todoList.filter((x) => {
      return x.id != id;
    });
    setTodoList(listFil);
  };

 

매개변수로 리스트의 id를 받아서 매개변수id와 todoList의 id가 같은 리스트를 제외한 나머지를 setTodoList로 state를 변경한다.