[React] mui DataGrid를 통한 API 호출 CRUD (1) Read

상품조회(Read)

 

1. useState Hook 사용을 위한 import 하기

import React, { useState } from 'react';

2. rows 상태 변수 선언하기

- 초기값으로 빈 배열을 할당하고, DataGrid에서 사용할 데이터를 담아두는 용도로 사용.

- setRows : rows 상태를 업데이트하는 함수

const [rows, setRows] = useState([]);

3. mui의 DataGrid 컴포넌트에서 사용 될 column 선언

 - field : 열이 표시할 데이터의 필드 이름

 - headerName : 열의 제목

 - width : 열의 너비 지정

// crud.js

  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 },
  ];

4.DataGird import 하기

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

5. 조회 버튼과 mui의 DataGrid 생성

 <Button>

 - Button을 클릭하면 실행되는 이벤트인 handleView

 <DataGrid>

 - rows : 테이블에 표시될 데이터

 - columns : 테이블의 열 정보를 나타내는 배열

 - pageSize : 테이블의 페이지당 행(columns) 수

 - rowsPerPageOptions : 테이블 페이지당 행(columns) 수를 선택할 수 있는 옵션 목록

 - checkboxSelection : 체크박스를 활성 / 비활성 여부 (현재는 활성 된 상태)

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

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

6. Button의 handleView 함수

 (1) axios.post 를 통해 'API url'의 API를 호출하고,

 (2) 응답을 받으면 response.data.data 배열에 포함된 각 항목마다 map 함수를 이용해 id, itemCd, itemNm, catCd, catNm, cdt 키 값을 가진 새로운 객체를 생성하고

 (3) 이 객체들을 배열에 저장함

 (4) 새로운 배열을 setRows 함수를 통해 rows state 변수에 할당함.

  - 이를 통해 상품 목록을 데이터 그리드에 렌더링 할 수 있다.

  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);
    });
  }

 

최종 코드

 

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([]);
  
  // 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);
    });
  }

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

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

    );
}

export default Crud;