지난번에 이어서 오늘은 삭제 기능을 만들어보자!

1. Item Component

각각의 항목들이 해내야하는 일들이 점점 많아 질 것이기 때문에 List.js에서 Item.js 컴포넌트를 새로 만들어 불러줄 것이다.

List.js

 <div>
      {todoList?.map((item, index) => (
        <Item key={`todo${index}`} item={item} />
      ))}
</div>

Item 컴포넌트로 localStorage에 저장된 item을 props로 넘겨준다.

Item.js

import React from 'react';

function Item({ item }) {
  return (
    <div>
      <p style={{ display: 'inline-block' }}>{item.item}</p>
      <button>삭제</button>
    </div>
  );
}

export default Item;

2.Delete 함수

filter라는 함수를 사용하여 사용자가 선택한 아이템의 id값과 list item들의 id값을 비교하여 새로운 리스트를 반환해준다.
(list라는 데이터가 필요하기 때문에 Item.js 컴포넌트가 아닌, List.js에 delete 함수를 생성하여 Item.js에 props로 넘겨준다.)

const deleteItem = (id) => {
    const cleanToDos = todoList.filter(
      (listItem) => listItem.id !== parseInt(id, 10),
    );
    window.localStorage.setItem('todoList', JSON.stringify(cleanToDos));
    setTodoList(cleanToDos);
};

Input.js와 다르게 List.js에서 제어를 하는 함수이기 때문에 useState 변수인 todoList에 직접 접근이 가능하여 reload를 해줄 필요가 없다. 그리고 새로고침을 해도 삭제 된 데이터가 잘 반영이 될 수 있도록 localStorage에도 filter 된 array를 저장해준다.

끝!