삭제기능구현하는 방법

[App.js 에서]

1. filter 해줌

2. setData로 state을 업데이트 해줌

  const onDelete = (targetId) => {
    console.log(`${targetId}가 삭제되었습니다.`);
    const newDiaryList = data.filter((it) => it.id !== targetId);
    console.log(newDiaryList);
    setData(newDiaryList);
  };

[DiaryList.js에서]

3. onDelete 함수를 받아오기

const DiaryList = ({ onDelete, diaryList }) => {
  //   console.log(diaryList);
  return (
    <div className="DiaryList">
      <h2>일기 리스트</h2>
      <h4>{diaryList.length}개의 일기가 있습니다.</h4>
      <div>
        {diaryList.map((it) => (
          <DiaryItem key={it.id} {...it} onDelete={onDelete} />
        ))}
      </div>
    </div>
  );
};

[DiaryItem.js에서]

4. 전달할 prop에 onDelete 추가하기

5. 삭제하기 button 만들고, onClick이벤트로 onDelete(id)로 동작하게하기.

const DiaryItem = ({ onDelete, author, content, createdDate, emotion, id }) => {
  // 전달할 프롭을 다 받아오기
  return (
    <div className="DiaryItem">
      <div className="info">
        <span>
          작성자: {author} | 감정점수: {emotion}
        </span>
        <br />
        <span className="date">{new Date(createdDate).toLocaleString()}</span>
      </div>
      <div className="content">{content}</div>
      <button
        onClick={() => {
          console.log(id);
          if (window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)) {
            onDelete(id);
          }
        }}
      >
        삭제하기{" "}
      </button>
    </div>
  );
};