[일기장 만들기_05] 배열 사용하기 3 - 데이터 삭제

목표

- LIST에 배열을 이용한 아이템 동적 삭제

---

1. 삭제버튼 추가

 

2. 데이터 추가와 마찬가지로 app 컴퍼넌트에 data state값을 바꿔줘야한다 => 삭제할 데이터를 뺀 배열로 업데이트

 

3. app.js에 onDelete 함수 생성() => DiaryItem에 있는 삭제버튼이 호출 할 수 있도록 부모인 DiaryList.js에 함수 전달

 

4. DiaryList.js에서 아이템(목록)을 불러오는 부분에 함수 전달

<div>
    {diaryList.map((it) => (
        <DiaryItem key={it.id} {...it} onDelete={onDelete} />
    ))}
</div>

 

5. 버튼 클릭시 함수 호출 하여 id값 전달

const DiaryItem = ({onDelete, id, author, content, emotion, create_date}) => {
    return (
        ~~~~~
            <button
            onClick={() => {
                if(window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)) {
                    // 👉 id전달
                    onDelete(id);
                }
            }}>삭제하기</button>
        </div>
    );
};

export default DiaryItem;

 

6. App.js는 전달받은 id값을 가지고 filter 메서드를 통해 id를 포함하지 않는 배열로만 필터링 후 전달

  const onDelete = (targetId) => {
    // 👉 id를 포함하지 않는 배열로만 필터링 후 배열 생성
    const newDiaryList = data.filter((it) => it.id !== targetId);
    setData(newDiaryList); // 👉 새 정의된 배열 넘겨줌
  };

---

Demo : winterlood - CodeSandbox