Todo List 만들기 with Typescript(4)

🌱 할일 삭제하기

📌 할일 삭제 기능 구현하기

const deleteTask = (todoDelete: string): void => {
    setTodoList(
      todoList.filter((task) => {
        return task.id !== todoDelete;
      }),
    ); 
  }; //1)

filter()를 활용하여 삭제기능을 구현하였다.

deleteTask={deleteTask} -- 2) props 전달 

그리고 이 값을 props로 전달을 하여 TodoListItem로 값을 전달해주었다. 여기서도 타입의 지정은 꼭 해주어야 한다. !!

<button>  className='delete'
            onClick={() => {
              deleteTask(task.id);
            }}>//3> onclick 이벤트 주기  
            <BsFillTrashFill /></button>

react-icon을 활용하여 원하는 아이콘(BsFillTrashFill)을 받아온다. 그곳에 onclick 이벤트를 이용하여 아이콘을 누르면 추가로 생긴 목록이 삭제 되록 기능을 구현하였다.

📌 고민

할일 삭제하기도 구글링을 통해 쉽게 기능 구현이 되었다. 하지만 여기서 문제점이 발생하였다.
할일을 삭제하려면 목록 하나만 삭제하여야 하는데 내가 쓴 목록 전체가 삭제되는 문제점이 발생하였다🥲 -> 고유의 아이디 값을 주지 않아서 발생한 문제였다.처음에는 아이디 값의 문제인줄 모르고 id라고 적어놓은 부분은 text로 바꾸고 문자열로 바꾸면 한번에 삭제되는 것을 막을 수 있을 것이라 생각했다. 하지만 똑같은 할일을 작성을 하게 되면서 또 한번에 삭제되게 되었다. 그래서 고유의 아이디 값을 설정하는 방법에 대해 공부하게 되었고 거기서 uuidV4를 알게 되었다. uuidV4로 설정 후에는 목록이 한번에 삭제되는 오류가 사라지게 되었다.

uuid

uuid는 소프트웨어 구축에 쓰이는 식별자 표준이다.
uuidsms 32개의 16진수로 표현되며 총 36개의 문자로 된 8-4-4-4-12라는 5개의 그룹을 하이픈으로 구분한다.

📌 전체코드

<App.tsx>
  
const deleteTask = (todoDelete: string): void => {
    setTodoList(
      todoList.filter((task) => {
        return task.id !== todoDelete;
      }),
    );
  };//1) delete 함수를 만들어주고 기능 구현하기 
...

reture(
  <div className='todo-list'>
        {todoList.map((task: ITask, key: number) => {
          return (
            <TodoListItem
              key={key}
              task={task}
              deleteTask={deleteTask}//2) 추가해주기 
              editTask={editTask}
              toggleComplete={toggleComplete}
            />
          );
        })}
      </div>
)

<TodoListItem.tsx>
  
  interface TodoListItemProps {
  task: ITask; 
  deleteTask(todoDelete: string): void;
  editTask(todoEdit: string): void;
  toggleComplete: ToggleComplete;
}
  const TodoListItem:REACT.FC<TodoListItemProps> = ({deleteTask}) =>{
  returen (<TodoListItem>
           <button>  className='delete'
            onClick={() => {
              deleteTask(task.id);
            }}>//3> onclick 이벤트 주기  
            <BsFillTrashFill /></button></TodoListItem>)}

👀 Reference

uuidV4
react-icon