memostack
article thumbnail
블로그를 이전하였습니다. 2023년 11월부터 https://bluemiv.github.io/에서 블로그를 운영하려고 합니다. 앞으로 해당 블로그의 댓글은 읽지 못할 수 도 있으니 양해바랍니다.
반응형

1. 아이템 삭제 기능 개발

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

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

 

1.1. deleted 플래그 추가

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

 

InputBox.jsx

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

 

1.2. 삭제 버튼 기능 만들기

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

 

ToDoItem.jsx

<javascript />
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); } }; // ... }

 

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

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

 

ToDoItemList.jsx

<javascript />
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> );

 

2. 결과 화면

결과 화면

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

https://github.com/bluemiv/react_todo_app

 

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

React로 만든 ToDo Web Application. Contribute to bluemiv/react_todo_app development by creating an account on GitHub.

github.com

 
반응형
블로그를 이전하였습니다. 2023년 11월부터 https://bluemiv.github.io/에서 블로그를 운영하려고 합니다. 앞으로 해당 블로그의 댓글은 읽지 못할 수 도 있으니 양해바랍니다.
profile

memostack

@bluemiv_mm

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!