React 18.2.0 버전
@toast-ui/react-grid 4.21.22 버전

1. npm으로 Toast ui Grid 다운로드

공식 문서를 따라 npm 으로 다운 받아줍니다. 공식 링크

1-1)

npm install --save @toast-ui/react-grid

1-2)

원하는 파일에 import 해옵니다. (해당 글은 ECMAScript 사용)

import 'tui-grid/dist/tui-grid.css';
import Grid from '@toast-ui/react-grid';

2. Grid 설정

// DefaultGrid.jsx
import Grid from '@toast-ui/react-grid'; //이것만 import 해 오면 테마 설정 불가
import { useEffect } from 'react';//테마 설정을 위해 필요
import TuiGrid from 'tui-grid'; //테마 설정을 위해 필요
import 'tui-grid/dist/tui-grid.css';//테마 설정을 위해 필요

export default function DefaultGrid({ gridData }) {
    const gridOptions = {
        columns: [
            { name: '1', header: 'c1', width: 160 },
            { name: '2', header: 'c2', width: 65 },
            { name: '3', header: 'c3', width: 90 },
            { name: '4', header: 'c4', width: 100 },
            /*{ name: '대그룹', header: "칼럼명" },*/
            { name: '5-1', header: "c5", width: 10 },
            { name: '6-1', header: "c6", width: 100 },
            { name: '7', header: 'c7', width: 60 },
            { name: '8', header: 'c8', width: 80 },
            { name: '9', header: 'c9', width: 70 },
        ],
        header: {
            height: 80, //칼럼 높이
            complexColumns: [//자식그룹이 있으면 위의 칼럼에 넣지 않고 여기서 생성해야 됨
                {
                    header: '칼럼명',
                    name: '대그룹',
                    hideChildHeaders: true, //자식 헤더를 숨김처리 (ex: header c5, c6를 숨김처리함)
                    childNames: ['5-1', '6-1']
                },
            ],
        },
        rowHeaders: ['checkbox'],
        bodyHeight: 500, //그리드 높이
    }

    useEffect(() => {
        TuiGrid.applyTheme('clean'); // 테마설정
    }, []); //컴포넌트가 처음 랜더링될 때만 실행

    return (
        <Grid data={gridData} columns={gridOptions.columns} {...gridOptions} />
    )
}

만든 Grid 컴포넌트를 다른 페이지에서 사용할 땐 아래와 같이 props로 Grid에서 띄울 데이터들 내려주면 된다.

//exPage.jsx
import DefaultGrid from "../../components/grid/defaultGrid";

export default function exPage() {
  	//api 호출 후 응답값 저장
	const [resData, setResData] = useState([]);
	//api 호출 함수는 생략
  
    return (
      <div>
        //생략
        <DefaultGrid gridData={resData} />
      </div>
    )
}

참고

npm @toast-ui/react-grid
Toast ui Grid 공식