[React] list item 삭제 기능

✔️구조

1. 특정 아이템 삭제 선택
2. 해당 아이템의 id값을 제외한 모든 item을 다시 setData로 값 갱신

✏️구현코드

App.js

'삭제하기' 버튼을 클릭했을 때, 해당 item을 삭제하는 onDelete코드 추가

  const onDelete = (targetId) => {
    console.log(`${targetId}가 삭제되었습니다.`)
    //삭제하려고 하는 item의 id값을 제외한 모든 item으로 list 갱신
    const newDiaryList = data.filter((it) => it.id !== targetId)
    setData(newDiaryList)
  }
  
  return (
    <div className='App'>
      <DiaryEditor onCreate={onCreate} />
	  //onDelete 추가
      <DiaryList onDelete={onDelete} diaryList={data} />
    </div>
  );
}

DiaryItem.js

삭제하기 버튼 추가

//onDelete 추가
const DiaryItem = ({ onDelete, id, author, content, emotion, created_date }) => {
    return (
      ...
      //삭제하기 버튼 추가
      <button
      	onClick={() => {
        	console.log(id)
        	if (window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)) {
            	onDelete(id)
            }
        }}
      >삭제하기</button>
	)
}

DiaryList.js

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