[React] mui DataGrid를 통한 API 호출 CRUD (2) Create

 

상품등록(Create)

 

1. 상품명. 카테고리등 입력을 위한 TextField import

import TextField from '@mui/material/TextField';

2. useState Hook을 이용한 state 변수 선언하기

 - 이 변수들은 각각의 input element와 바인딩 되어 있으며,
 - 사용자가 input element에 값을 입력하면 해당 state 변수의 값을 변경하게 된다.

const [itemCd, setItemCd] = useState('');
const [itemNm, setItemNm] = useState('');
const [catCd, setCatCd] = useState('');
const [catNm, setCatNm] = useState('');

3. 입력을 위한 TextField

 - value : 현재 입력값을 나타내는 상태 변수

 - onChange : 입력값이 변경될 때마다 호출되는 함수로, 새로운 값을 state 변수에 저장하는 역할이며,

e.target.value를 통해 입력값을 가져옴

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

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

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

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

 

4. 등록을 위한 Button

 - 버튼클릭시 실행되는 handleJoin

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

 

5. Button의 handleJoin 함수

 - axios.post를 사용하여 'API url'의 엔드포인트로 POST 요청을 보낸다.
 - itemCd, itemNm, catCd, catNm 값을 요청 바디에 담아서 보낸다.

  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("상품등록에 실패하였습니다.");
      })
    }
  }

 

 

최종 코드

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("상품등록에 실패하였습니다.");
      })
    }
  }
  

  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={handleView}
      >조회
      </Button>


  <div style={{ height: 600, width: '100%' }}>
    <DataGrid
      rows={rows}
      columns={columns}
      pageSize={5}
      rowsPerPageOptions={[5]}
      checkboxSelection
    />
  </div>



    );
}

export default Crud;