React로 간단한 ToDo List 만들기 (#8 삭제 기능 개발)

아이템 삭제 기능 개발

각 아이템의 우측에 있는 휴지통 버튼을 누르면 삭제가 되도록 해보자

• 실제로는 지우지 않고, deleted 플래그 값으로 안보이게 할 예정

 

deleted 플래그 추가

지웠다는 것을 표시하기 위해 deleted 라는 플래그 값을 기존 state에 추가한다.

 

InputBox.jsx

const InputBox = ({ todoList, setTodoList }) => {
  // ...
  const onClickAddButton = () => {
    // todoItemList에 값 추가
    const nextTodoList = todoList.concat({
      id: todoList.length,
      text,
      checked: false,
      deleted: false, // 삭제 Flag 값을 추가한다.
    });
  }
  // ...
}

 

삭제 버튼 기능 만들기

휴지통 버튼을 누르면 deleted 값이 true가 되도록한다.

 

ToDoItem.jsx

const ToDoItem = ({ todoItem, todoList, setTodoList }) => {
  // ...
  const onClickDeleteButton = () => {
    if (window.confirm('정말로 지우실건가요?')) {
      const nextTodoList = todoList.map((item) => ({
        ...item,
        deleted: item.id === todoItem.id ? true : item.deleted,
      }));

      setTodoList(nextTodoList);
    }
  };
  // ...
}

 

삭제된 아이템은 안보이게 하기

todoItem.deleteda 값이 true 일때는 화면에 보이지 않게 null을 반환한다.

 

ToDoItemList.jsx

const ToDoItemList = ({ title, todoList, setTodoList, checkedList }) => (
  <div className="todoapp__list">
    {/* props로 부터 title 값을 전달 받음 */}
    <p className="todoapp__list-tit">{title}</p>

    <ul className="todoapp__list-ul">
      {todoList && // todoList가 있을때만 출력
        todoList.map((todoItem) => {
          // 삭제한 항목인 경우, 출력하지 않음 (deleted가 true)
          if (todoItem.deleted) return null;

          // checkedList 값에 따라 '할 일 목록' 또는 '완료한 목록'을 출력
          if (checkedList !== todoItem.checked) return null;

          return (
            // map을 이용하여 ToDoItem을 출력
            <ToDoItem
              key={todoItem.id}
              todoItem={todoItem}
              todoList={todoList}
              setTodoList={setTodoList}
            />
          );
        })}
    </ul>
  </div>
);

 

결과 화면

결과 화면

전체 코드는 아래 링크에서 확인 할 수 있습니다.

https://github.com/bluemiv/react_todo_app

GitHub - bluemiv/react_todo_app: React로 만든 ToDo Web Application