[React] 배열 사용하기 3 - 데이터 삭제

목표

직전의 게시글에서 데이터를 추가했습니다. 이번에는 삭제 버튼을 만들어서 데이터를 삭제해보도록 하겠습니다.

해당 그림과 같이 게시글에 삭제 버튼을 달고 버튼을 누르면 해당 게시글이 삭제가 되게 하려고 합니다.

현재 컴포넌트는 이렇게 구성되어 있습니다.
App에서 onDelete 함수를 만들어서 DiaryList를 통해 DiaryItem으로 props로 전달을 해주고 삭제 버튼을 누를 시 해당 함수가 작동하도록 해보겠습니다.

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 = (name, content, hungry) => {
    const created_date = new Date().getTime();
    const newItem = {
      name,
      content,
      hungry,
      created_date,
      id: dataId.current,
    };
    dataId.current += 1;
    setData([newItem, ...data]);
  };

  const onDelete = (targetId) => {
    const newDirayList = data.filter((it) => it.id !== targetId);
    setData(newDirayList);
  };

  return (
    <div className="App">
      <DiaryEditor onCreate={onCreate} />
      <DiaryList onDelete={onDelete} diaryList={data} />
    </div>
  );
}

export default App;

App.js에서는 onDelete 메서드를 만들고 targetId를 받아 filter 메서드를 사용하여 해당 게시글을 제외한 나머지 리스트 배열로 저장합니다.

만든 onDelete 메서드를 props로 DiaryList로 전달합니다.

DiaryList.js

import DiaryItem from "./DiaryItem";

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

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

export default DiaryList;

여기서 봐야할 것은 그저 onDelete 메서드를 props로 받아 그대로 DiaryItem에게 넘겨주는 것입니다. 이것을 드릴링이라고 합니다.

DiaryItem.js

const DiaryItem = ({ onDelete, name, content, created_date, hungry, id }) => {
  return (
    <div className="DiaryItem">
      <div className="info">
        <span>
          이름 : {name} | 배고픔 정도 : {hungry}
        </span>
        <br />
        <span className="date">{new Date(created_date).toLocaleString()}</span>
      </div>
      <div className="content">{content}</div>
      <button
        onClick={() => {
          if (window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)) {
            onDelete(id);
          }
        }}
      >
        삭제
      </button>
    </div>
  );
};

export default DiaryItem;

DiaryItem.js에서는 window.confirm을 사용하여 삭제여부를 한번 물어보고 onDelete를 호출합니다.

테스트 결과 삭제가 잘 되는 것을 확인할 수 있습니다.

---

해당 게시글은 인프런 강의
"한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지(이정환)"
를 정리한 내용입니다. 쉽게 잘 설명해주시니 여러분도 강의를 듣는 것을 추천드립니다.