리액트 - 그리드 라이브러리 기초사용법 예제 [@mui/x-data-grid-premium]

언어	Java 17, JavaScript (ES6+)
프레임워크	Spring Boot 3.3.3, React 18.3.1
DB	MySQL 8.x
빌드 도구	Gradle 7.x

 

React 라이브러리 중 하나인 '@mui/x-data-grid-premium' 

Material-UI에서 제공하는 고급 데이터 그리드 라이브러리이다. MUI X 라이브러리의 유료 버전으로 무료버전은 사용해 본적이 없어서 구체적인 차이는 잘 모르지만 거의 대부분의 기능을 제공하지 않는 것으로 알고있다.

<MUI 공식 문서>
https://mui.com/x/api/data-grid/data-grid-premium/

DataGridPremium API - MUI X

 

 

<주요기능>  

1) 그리드 데이터를 .xlsx 형식으로 내보낼 수 있음.
2) 평균, 합계 등 데이터를 열 단위로 집계 가능.
3) 대규모 데이터 처리(클라이언트/서버 사이드 페이징, 무한 스크롤 등)가능.

 

등 외에도 많은 편리한 기능을 제공한다.

 

<기초 사용법>

해당 공식문서만 참고해도 기초적인 사용법 및 소스는 모두 얻을 수 있다. 추가로 Dev.to 같은 개발자 커뮤니티를 참고해도 된다.

나는 재사용성과 커스터마이징을 위해  DataGrid 컴포넌트를 따로 정의했다.

 

그리고
[페이지 컴포넌트]  >  [그리드 컴포넌트]  >  [그리드 설정파일]
유지보수성을 높이기 위해 이렇게 세 파일로 분리해서 관리했다.

 

<그리드 컴포넌트>

import DataGrid from "../DataGrid.jsx";
import { useState, useEffect } from "react";
import { getGridConfig } from "../설정파일경로";

const MyGridComponent = ({ gridParam, gridRef }) => {
    const [gridConfig, setGridConfig] = useState({}); 

    useEffect(() => {
        initGridConfig();
    }, []);

    const initGridConfig = async () => {
        const config = getGridConfig();
        setGridConfig(config);
    };


    return (
        <div className="css클래스명">
            {!isEmptyObj(gridConfig) && (
                <DataGrid
                    params={gridParam}
                    gridConfig={gridConfig}
                    gridRef={gridRef}
                />
            )}
        </div>
    );
};

export default MyGridComponent;

 

gridConfig state를 생성한 뒤 설정파일에 있는 getGridConfig 함수를 호출하여 값을 할당한다.

getGridConfig 함수는 '그리드 설정 객체'를 깊은복사 하여 반환한다.

 

<그리드 설정파일>

import { setSingleSelect } from "../../utils/dataFormatter";
import { cloneDeep } from "lodash";

export const getGridConfig = () => {
    let result = cloneDeep(gridConfig);
    return result;
};

const gridConfig = {
    columns: [
        {
            field: "itemName",
            align: "center",
            headerAlign: "center",
            headerName: "아이템 이름",
            flex: 1,
            editable: true,
            required: true,
            headerClassName: "header-required",
        },
        {
            field: "status",
            align: "center",
            headerAlign: "center",
            headerName: "상태",
            flex: 1,
            editable: true,
            type: "singleSelect", 
            valueFormatter: setSingleSelect,
        },
        {
            field: "notes", 
            align: "center",
            headerAlign: "center",
            headerName: "노트",
            flex: 1,
            editable: true,
        },
    ],
    url: "/api/example-data", 
};

 

url은 그리드 데이터를 가져올 API 엔드포인트이다.

 

위 방식은 공식문서에 나와있는 방식은 아니나, React에서 동적 데이터 그리드 설정을 관리하고 가독성면에서 이점이 많아서 저렇게 구성했다.

 

 

<실사용 후기>

MUI Table은 그냥 HTML <table>태그를 React스럽게 꾸민 수준에 가깝고 특별한건 없다.

 

그러나 확실히 mui그리드가 기본적으로 제공하는 기본기능들이 많고(스크롤, 정렬, 페이징, ...등등)

무엇보다 가장 큰 장점은

 

mui그리드의 성능이 압도적으로 MUI Table보다 좋다는 것이다

 

사실 데이터 수가 적으면 크게 체감하기 어려우나

만건 이상의 데이터를 뿌려주는 경우 확실히 MUI Table은 딜레이가 심했다.

 

그런데 헤더 행의 경우 위아래로 행병합, 열병합 하는데에는 MUI Table이 적합해서
형식이 고정되어있거나 매우 적은 양의 데이터만 불러오는 ui가 필요할경우에만 사용해야 한다.