React에서 데이터베이스나 RestAPI로 부터 가져온 데이터를 HTML Table로 만으로도 쉽게 보여줄 수 있습니다.

하지만, HTML 테이블 위에서 표현하고자 하는 데이터 양이 많아지고,
데이터 정렬, 조회, 필터링, 검색, 페이징 및 데이터 입력/수정/삭제 등 사용자가 쉽게 데이터를 조작할 수 있도록 개발하는 것은 쉬운 일이 아니며,
성능을 보장할 수도 없는 경우가 많습니다.

이를 위해 DataGrid(데이터그리드)라는 컴포넌트를 현업에서 HTML 테이블 대신 많이 사용합니다.

하지만, React 환경을 100% 완전 지원하는 DataGrid(데이터 그리드)를 찾기란 쉽지 않죠....
(대부분 기본 JavaScritp 코드만 지원하여 React에서 충돌이 발생하거나, 유지보수 시에 코드 스타일이 달라 어려움이 있더라구요..)

이에 이번 포스팅에서는 React 개발 환경을 100% 지원하는, Wijmo(위즈모)의 React DataGrid(데이터그리드)인 FlexGrid를 활용하여,
React 함수형 컴포넌트 기반의 React 데이터그리드(DataGrid)를 단계적으로 생성하는 방법을 알아 보겠습니다. 😁

1. React 앱 생성하기
2. Wijmo module 추가하기
3. 그리드 초기 설정하기
4. FlexGrid 컴포넌트 추가하기
5. CSS Style 설정하기
6. React 앱 실행하기 # 1. React 앱 생성하기

---

1. React 앱 생성하기

먼저, React 앱을 생성한 다음 NPM으로 @mescius/wijmo.react.all을 설치해 React에서 Wijmo module을 사용하기 위한 환경을 셋팅합니다.

1) React CLI 설치

npm install -g create-react-app

2) react-functional-component 앱 생성

npx create-react-app react-functional-component

3) 앱 폴더로 이동

cd react-functional-component

4) Wijmo 라이브러리 설치

npm install @mescius/wijmo.react.all

5) useEvent 라이브러리 설치

npm install react-use-event-hook

6) React 앱 실행

npm start

2. Wijmo module 추가하기

작업을 진행할 React 앱 src/App.js 파일에 접근하여 사용할 Wijmo module을 추가해줍니다.

1) Wijmo의 그리드를 구현하기 위해 아래의 세 개의 모듈(module)을 import 합니다.

• @mescius/wijmo.react.grid ← 위즈모 React 용 FlexGrid 모듈
• @mescius/wijmo.styles/wijmo.css ← 위즈모 Style CSS
• @mescius/wijmo.cultures/wijmo.culture.ko ← 위즈모 한국 문화권 설정

2) @mescius/wijmo.react.grid의 모듈의 이름을 ‘wjGrid’로 임의 지정합니다.

[src/App.js 코드]

import React from 'react';
import ReactDOM from 'react-dom/client';
import useEvent from 'react-use-event-hook';
 
// Wijmo grid 모듈 추가 
import * as wjGrid from '@mescius/wijmo.react.grid';
import '@mescius/wijmo.styles/wijmo.css';
import '@mescius/wijmo.cultures/wijmo.culture.ko'; 

3. 그리드 초기 설정하기

다음으로 App.js 파일에서 데이터 그리드를 생성하기 위한 초기화를 진행합니다.

1) 우선, DOM에 직접 접근하여 그리드를 참조할 수 있도록 useRef를 설정합니다.

2) 호출 시 최신의 props, state 정보를 얻거나 동일한 함수를 참조할 수 있도록, useEvent를 사용하여 그리드 초기화 함수를 생성합니다.

[src/App.js 코드]

const App = function (prop) { 
  const gridRef = React.useRef();
  const gridInitial = useEvent((grid) => {});
 
  //… 코드 생략
}

3) 이제 샘플 데이터를 생성하기 위한 src/data.js 파일을 생성합니다.

여기에서는 getData 함수를 호출할 때, 임의의 데이터를 생성하여 data 변수에 전달합니다.

[src/data.js 코드]

export default function getData() {
  let countries = "US,Germany,UK,Japan,Italy,Greece".split(","),
    data = [];
  for (let i = 0; i < countries.length; i++) {
    data.push({
      id: i,
      country: countries[i],
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000
    });
  }
  return data;
}

4) 생성한 data.js를 App.js에 getData라는 이름으로 import 해줍니다.

이후에 fucntion 코드 영역에서, getData() 함수를 선언하여 data를 생성해줍니다.

[src/App.js 코드]

import React from 'react';
import ReactDOM from 'react-dom/client';
import useEvent from 'react-use-event-hook';
import * as wjGrid from '@mescius/wijmo.react.grid';
import '@mescius/wijmo.styles/wijmo.css';
 
// data.js 추가
import getData from './data.js';  
 
const App = function (prop) { 
  const gridRef = React.useRef();  
  const gridInitial = useEvent((grid) => {});
 
  //data.js의 getData 함수 - 데이터 불러오기
  const data = getData();
 
  //… 이하 코드 생략
}

4. FlexGrid 컴포넌트 추가하기

이제 return 영역에서 받아온 데이터를 그리드 형태로 보여주기 위해, Wijmo의 FlexGrid 컴포넌트를 추가하고, 아래와 같이 그리드의 속성 값을 설정합니다.
(Wijmo FlexGrid 속성 자세히 보기)

• ref: DOM에 직접 접근하여 그리드 참조 변수
• itemsSource: 그리드에 바인딩할 데이터 객체
• initialized: 그리드 컨트롤의 초기화 설정 이벤트

[src/App.js 코드]

return (
  <div className = "container-fluid">
  <h3> FlexGrid </h3>
   <div>
     <wjGrid.FlexGrid ref={gridRef} itemsSource={data} initialized={gridInitial}>
     </wjGrid.FlexGrid> 
   </div>
  </div>
);

이후에 FlexGridColumn 컴포넌트를 추가하여, 각 열의 header 이름과 바인딩할 데이터를 사용자 정의합니다.

[src/App.js 코드]

return (
  <div className = "container-fluid">
  <h3> FlexGrid </h3>
  <div>
    <wjGrid.FlexGrid ref={gridRef} itemsSource={data} initialized={gridInitial}>
 
     <wjGrid.FlexGridColumn header="ID" binding="id" width={80} />
     <wjGrid.FlexGridColumn header = "Country"
       binding = "country" /> <wjGrid.FlexGridColumn header = "Sales"
       binding = "sales" /> <wjGrid.FlexGridColumn header = "Expenses"
       binding = "expenses" />
 
    </wjGrid.FlexGrid> 
   </div>
  </div>
);

5. CSS Style 설정하기

마지막으로 src/App.css 파일을 생성하고, 그리드에 적용하고자 하는 사용자 정의 CSS 속성을 설정합니다.

아래 코드에서는 전체 그리드의 상단 마진을 100px, 좌우 패딩을 15px, 너비를 500px로 설정하였습니다.

[src/App.css 코드]

.container-fluid { margin-top: 100px; padding: 0 15px; }
.container-fluid .wj-flexgrid { width: 500px; }

위에서 생성한 App.css를 App.js에 import 합니다.

[src/App.js 코드]

import React from 'react';
import ReactDOM from 'react-dom/client';
import useEvent from 'react-use-event-hook';
import * as wjGrid from '@mescius/wijmo.react.grid';
import '@mescius/wijmo.styles/wijmo.css';
import getData from './data.js';
 
//App.css 가져오기
import './App.css';

6. React 앱 실행하기

작성한 코드를 저장한 다음 터미널에서 다음 명령을 실행합니다.

npm start

앱을 실행하면 아래의 샘플과 같이 데이터가 바인딩된 그리드가 표시되는 것을 확인할 수 있습니다.

*아래 stackblitz링크를 통해서 실제 동작하는 샘플과 소스코드를 확인해보세요.
React Grid 샘플 & 소스코드 확인하기 - Stackblitz 바로가기

---

지금 React 그리드를 무료로 사용해보세요!!

더욱 상세한 기능이 포함되어 있는 Excel 가져오기/내보내기 데모를 소스 코드와 함께 확인해 볼 수 있어요!!!
PureJS, React, Vue, Angular 코드도 확인할 수 있어요 !!

• Wijmo 홈페이지
• Wijmo React 시작하기
• Wijmo 튜토리얼