[React] mui DataGrid를 통한 API 호출 CRUD (3) Delete

 

상품삭제(Delete)

1. selectedIds 상태 변수 선언하기

 - id 선택을 위한 useState Hook 사용

const [selectedIds, setSelectedIds] = useState([]);

2. 삭제를 위한 Button

 - 버튼 클릭시 실행되는 handleDelete 함수

<Button onClick={handleDelete}>삭제</Button>

3. Button handleDelete 함수

 (1) 선택된 항목을 삭제하는 함수정의

 (2) selectedIds의 길이(length)가 0이면 아무것도 선택된게 없음 > alert창을 띄우고 종료

 (3) 해당 항목들의 id 값을 selectedIds 배열에서 추출하여 data 배열에 저장한다.

 (4) axios.post() 함수를 사용해 서버에 HTTP POST 요청을 보낸다.

 (5) 이때 data 배열을 요청의 payload로 전송한다.

const handleDelete = () => {
    if(selectedIds.length === 0){
      alert("아무것도 선택되지 않았습니다.");
    } else {
      axios.post('API url', {
        data: selectedIds.map((id) => ({ id })),
      })
      .then(() => {
        alert("상품이 성공적으로 삭제되었습니다.");
      })
      .catch((error) => {
        alert("상품삭제에 실패하였습니다.");
        console.log(error);
      })
    }
}

 

4. 선택 항목을 불러올 수 있게 mui의 DataGrid를 수정

 - onRowSelectionModelChange : 선택된 행의 ID를 추적하고 setSelectedIds 함수를 사용하여 selectedIds 상태를 업데이트
 - selectedIds prop : 선택된 행의 ID를 포함하는 배열을 전달, 사용자가 선택한 항목을 추적하고 해당 항목에 대한 작업을 수행하는 데 사용

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  rowsPerPageOptions={[5]}
  checkboxSelection
  onRowSelectionModelChange={(newSelectedIds) => {
    setSelectedIds(newSelectedIds);
  }}
  selectedIds={selectedIds}
/>

 

최종 코드

 

import React, { useState } from 'react';
import axios from 'axios';
import Button from '@mui/material/Button';
import { DataGrid } from '@mui/x-data-grid';
import TextField from '@mui/material/TextField';

function Crud() {

  // 1. useState
  const [rows, setRows] = useState([]);
  const [itemCd, setItemCd] = useState('');
  const [itemNm, setItemNm] = useState('');
  const [catCd, setCatCd] = useState('');
  const [catNm, setCatNm] = useState('');
  
  // 2-1. 상품 조회
  const columns = [
    { field: 'id', headerName: '순번', width: 100 },
    { field: 'itemCd', headerName: '품목 코드', width: 150 },
    { field: 'itemNm', headerName: '품명', width: 250 },
    { field: 'catCd', headerName: '카테고리', width: 200 },
    { field: 'catNm', headerName: '카테고리 번호', width: 180 },
    { field: 'cdt', headerName: '제조일', width: 200 },
  ];
  
  // 2-2. 상품조회 Button
  const handleView = () => {
    axios.post('API url', {
      itemCd: "",
      itemNm: "",
      catCd: "",  
      catNm: "",
    })
    .then((response) => {
      const array = response.data.data.map((item, index) => ({
        // id: index + 1,
        id: item.id,
        itemCd: item.itemCd,
        itemNm: item.itemNm,
        catCd: item.catCd,
        catNm: item.catNm,
        cdt: item.cdt,
      }));
      setRows(array);
    })
    .catch((error) => {
      console.log(error);
    });
  }
  
  // 3. 상품 등록
  const handleJoin = () => {
    if(itemCd === "" || itemNm === "") {
      alert("품목코드와 품명은 필수입력 사항입니다.");
    } else {
      axios.post('API url', {
        itemCd: itemCd,
        itemNm: itemNm,
        catCd: catCd,
        catNm: catNm,
      })
      .then(() => {
        alert("상품등록이 완료되었습니다.");
        window.location.reload();
      })
      .catch(() => {
        alert("상품등록에 실패하였습니다.");
      })
    }
  }

  // 4. 상품 삭제
  const [selectedIds, setSelectedIds] = useState([]);

  const handleDelete = () => {
    if(selectedIds.length === 0){
      alert("아무것도 선택되지 않았습니다.");
    } else {
      axios.post('API url', {
        data: selectedIds.map((id) => ({ id })),
      })
      .then(() => {
        alert("상품이 성공적으로 삭제되었습니다.");
      })
      .catch((error) => {
        alert("상품삭제에 실패하였습니다.");
        console.log(error);
      })
    }
  }
  

  return (
    <div>

      <span>품목코드</span>
      <UploadTextField
        type="text"
        value={itemCd}
        onChange={(e) => setItemCd(e.target.value)}
        size="small"
      />

      <span>품명</span>
      <UploadTextField
        type="text"
        value={itemNm}
        onChange={(e) => setItemNm(e.target.value)}
        size="small"
      />

      <span>카테고리</span>
      <UploadTextField
        type="text"
        value={catCd}
        onChange={(e) => setCatCd(e.target.value)}
        size="small"
      />

      <span>카테고리 번호</span>
      <UploadTextField
        type="text"
        value={catNm}
        onChange={(e) => setCatNm(e.target.value)}
        size="small"
      />

      <Button
        onClick={handleJoin}
      >등록
      </Button>

      <Button
        onClick={handleDelete}
      >삭제
      </Button>

      <Button
        onClick={handleView}
      >조회
      </Button>

    </div>

      <div style={{ height: 600, width: '100%' }}>
        <DataGrid
          rows={rows}
          columns={columns}
          pageSize={5}
          rowsPerPageOptions={[5]}
          checkboxSelection
          onRowSelectionModelChange={(newSelectedIds) => {
            setSelectedIds(newSelectedIds);
          }}
          selectedIds={selectedIds}
        />
  </div>

    );
}

export default Crud;