[React] 최적화 4. 최최종

❗ 문제점 ❗

일기 배열에서 삭제하기, 수정하기를 하게 되면 나머지 일기 아이템들도 모두 랜더링 된다.

💡 DiaryItem의 매개변수 확인

-> onEdit과 onRemove를 useCallback을 사용하여서 최적화할 예정

//App.js
const onRemove = useCallback((targetId) => {
  setData((data) => data.filter((it) => it.id !== targetId)); // data에 최신 state 업데이트
}, []);

const onEdit = useCallback((targetId, newContent) => {
  setData((data) =>
    data.map((it) => (it.id === targetId ? { ...it, content: newContent } : it))
  );
}, []);