리스트 데이터 삭제와 수정

0. 리스트 데이터 삭제

0-1. onRemove 생성과 prop전달

// App.js
function App() {
//다른 코드 생략

//삭제 코드
  // 삭제
  const onRemove = (targetId) => {
    const newDiaryList = data.filter((item) => item.id !== targetId);
    setData(newDiaryList);
    console.log(`${targetId}가 삭제됐습니다.`);
  };

}

onRemove 함수는 targetId를 받아서 현재 data에서 targetId를 가진 것을 제외한 새로운 newDiaryList 배열을 반환한다. 이것을 setData()의 인자로 넘겨서 data의 상태를 업데이트한다.

// DiaryItem.js
const DiaryItem = () => {
	const handleRemove = () => {
    	if (window.confirm(`${id}번째 다이어리를 삭제하시겠습니까?`)) {onRemove(id);}
  	};
  중략...
  return (
    <div className="DiaryItem">
      중략...
      <button onClick={handleRemove}>삭제</button>
    </div>
  )
}

이때 주의할 점은 만들어 놓은 onRemove prop을 App.js -> DiaryList 컴포넌트에 전달 -> DiaryItem 컴포넌트에 전달해야 한다. DiaryList 컴포넌트에서는 이 프롭을 사용하지 않지만 그 자식 컴포넌트인 DiaryItem에 전달하기 위해 이렇게 사용한다.

1. 데이터 수정

1-1.