삭제버튼 만들기

프롭스 드릴링

• app -> DiaryList -> DiaryItem
  
  

삭제하려는 id빼오기

function DiaryItem({ ⭐onDelete, author, content, created_date, emotion, id }) {
  return (
    <div className="DiaryItem">
      <div className="info">
        <span>
          작성자 : {author} | 감정점수: {emotion}
        </span>
        <br />
        {/* new Date 괄호안에 값을 넣어주고 .toLocaleString() 붙이면 인간이 알아보는 시간이 나온다*/}
        <span className="date">{new Date(created_date).toLocaleString()}</span>
      </div>
      <div className="content">{content}</div>
      <button
       ⭐ onClick={() => {
          console.log(id);
          /* 대화창처럼 선택버튼이 나옴 */
          ⭐if (window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)) {
            // id를  onDelete에 전달
           ⭐ onDelete(id);
          }
        }}
      >
        삭제하기
      </button>
    </div>
  );
}

export default DiaryItem;

• app.js

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,
      //어떤 돔도 가르키지 않고 0이라는 값을 가지고있다.
      id: dataId.current,
    };
    dataId.current += 1;
    setData([newItem, ...data]);
  };
  ⭐const onDelete = (targetId) => {
    console.log(`${targetId} 가 삭제되었습니다.`);
    ⭐//filter로 제외해서 새로운 배열
    const newDiaryList = data.⭐filter((it) => it.id !== targetId);
    //setData에 새로운 배열 추가
    ⭐setData(newDiaryList);
  };
  return (
    <div className="App">
      <DiaryEditor onCreate={onCreate} />
      <DiaryList onDelete={onDelete} diaryList={data} />{" "}
      {/* 더미 리스트 프롭스로 전달 */}
    </div>
  );
}

export default App;