React simple diary - 데이터 삭제

App.js

import { useRef, useState } from "react";
import "./App.css";
import DiaryEditor from "./DiaryEditor";
import DiaryList from "./DiaryList";

function App() {
  const [data, setData] = useState([]);

  const dataId = useRef(0);

  const onCreate = (author, content, emotion) => {
    const created_date = new Date().getTime();
    const newItem = {
      author,
      content,
      emotion,
      created_date,
      id: dataId.current,
    };
    // 다음 일기 Item은 숫자 증가
    dataId.current += 1;
    setData([newItem, ...data]);
  };

  // 어느 Id를 갖고 있는 요소를 지우길 원하나 매개변수로 전달
  const onDelete = (targetId) => {
    console.log(`${targetId}가 삭제되었습니다`);
    const newDiaryList = data.filter((it) => it.id !== targetId);
    setData(newDiaryList);
  };

  // DiaryItem의 부모인 DiaryList 컴포넌트에 props로 onDelete 함수를 내려준다
  return (
    <div className="App">
      <DiaryEditor onCreate={onCreate} />
      <DiaryList onDelete={onDelete} diaryList={data} />
    </div>
  );
}
export default App;

DiaryList

import DiaryItem from "./DiaryItem";

// 자신의 부모로부터(App 컴포넌트) onDelete를 받았음
const DiaryList = ({ onDelete, diaryList }) => {
  return (
    <div className="DiaryList">
      <h2>일기 리스트</h2>
      <h4>{diaryList.length}개의 일기가 있습니다.</h4>
      <div>
        {diaryList.map((it) => (
          // DiaryItem에게 onDelete를 내려줌
          <DiaryItem key={`diaryitem_${it.id}`} {...it} onDelete={onDelete} />
        ))}
      </div>
    </div>
  );
};

DiaryList.defaultProps = {
  diaryList: [],
};

export default DiaryList;

DiaryItem

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

export default DiaryItem;

실행 화면

해당 targetId를 가진 배열 요소를 제외한 새로운 배열을 만들어서 setData 함수에 전달해서 data 배열을 바꿔준다

onDelete 함수가 수행이 되면서 data의 state를 바꾼다
전달받은 targetId를 포함하지 않는 배열로만 해서 바꾼다
삭제해서 새로운 배열을 만들어서 상태를 변화 시키면 상태가 변화 했기 때문에 DiaryList가 다시 render가 되면서 데이터가 삭제된다