데이터 그리드는 가장 일반적인 시각 소프트웨어 요소 중 하나입니다. 그리드은 우리 모두가 가능한 한 많은 데이터를 가능한 빨리 받아들이고 이해하도록 도와줍니다. 데이터 그리드는 데이터를 표시 할뿐만 아니라 편집할 때에도 그 어느 것보다 유용합니다.

시장에는 오픈 소스, 타사 및 자체 개발 된 많은 JavaScript 데이터 그리드가 있지만, 전 세계의 많은 개발자들은 편의성, 다양한 기능, 고성능의 데이터 시각화를 제공하는  Wijmo의 FlexGrid를 선택하고 있습니다.

Wijmo 데모를 통해 FlexGrid가 실제로 작동하는 것을 확인할 수 있습니다 . NPM이나 CDN에서 가져오거나 홈페이지에서 다운로드할 수 있습니다.

이제 FlexGrid를 적용하여 몇 분 안에 맞춤형 React 데이터 그리드를 구축해 보겠습니다 . 

아래의 애플리케이션은 Facebook의 JavaScript 프레임워크인 React와 함께 FlexGrid를 사용하는 방법을 보여줍니다.

https://stackblitz.com/edit/react-j3qjou

해당 샘플에서는  stackblitz 에디터를 사용하여 샘플을 만들어보고자 합니다. 웹 상에서 쉽게 코드를 작성고 유지 보수 및 공유가 용이합니다.

React 앱 만들기 

자신의 앱 복사본을 만들려면 다음 단계를 수행하십시오.

1. stackblitz 사이트로 이동합니다.
   
2. 화면 하단의 "React / JavaScript"버튼을 클릭하십시오
3. 종속성 목록에 "wijmo"를 입력하여 프로젝트에 Wijmo를 추가하십시오. (자동으로 추가됩니다.)
   
   
   
   

필요한 모듈 가져 오기

React 버전에서는 모든 코드와 로직을 "index.js"파일에 포함할 것입니다.

코드는 React와 Wijmo에서 필요한 클래스와 스타일을 가져 오는 것으로 시작합니다.

// index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

import { CollectionView } from 'wijmo/wijmo';
import { FlexGrid } from 'wijmo/wijmo.react.grid';
import { FlexGridFilter } from 'wijmo/wijmo.react.grid.filter';
import 'wijmo/styles/themes/wijmo.theme.material.css';

클래스 외에도 코드에서 일부 CSS를 가져 오는 방법을 주목하십시오. 이 경우 Wijmo에 포함된 Wijmo의 Material 테마를 선택했습니다.

앱 스타일

앱의 스타일을 지정하려면 다음과 같이 styles.css 파일을 편집합니다.

/* styles.css */
body {
  font-family: Lato, Arial, Helvetica;
}
.wj-flexgrid { /* limit the grid's width and height */
  max-height: 300px;
  max-width: 32em;
}

그리드에 데이터 소스 추가

앱 컴포넌트는 다음과 같이 정의합니다.

// index.js
class App extends Component {
  constructor() {
    super();
    this.state = {
      data: new CollectionView([], { // grouped CollectionView
        groupDescriptions: ['make']
      }),
    };
    this.filterApplied = () => {
      let view = this.state.data;
      this.setState({ // to update summary info
        data: view,
      });
    }
  }

  componentDidMount() {
    fetch('https://api.myjson.com/bins/cqvk8')
      .then(result => result.json())
      .then(data => {
        let view = this.state.data;
        view.sourceCollection = data;
        this.setState({
          data: view
        });
      });
  }
  render() { … }
}

App state는 "data"속성을 통해 데이터를 노출합니다. 이 속성은 "make"라는 항목으로 그룹화된 CollectionView입니다. 컴포넌트가 마운트된 후, 데이터가 비동기적으로 로드됩니다. 데이터가 수신되면 CollectionView의 sourceCollection 속성에 할당되어 응용 프로그램에서 사용할 수있게됩니다.

또한 컴포넌트는 데이터가 필터링될 때 상태를 업데이트하는 데 사용되는 filterApplied 메서드를 정의합니다 . 이것은 앱 헤더에 표시되는 총 개수를 업데이트하는 데에 필요합니다.

데이터를 실제로 시각화

마지막 단계는 그리드를 포함한 전체 UI를 렌더링 하는 App 컴포넌트의 render 메소드 구현입니다 .

// index.js
class App extends Component {
  constructor() {…}
  componentDidMount() {…}
  render() {
    return (
      <div>
        <h1>
          2019 Sedans (React)
        </h1>
        <p>
          Sort by model …</p>
        <p>
          Showing{' '}
          <b>{this.state.data.items.length}</b> models from{' '}
          <b>{this.state.data.groups.length}</b> makes.</p>
      <FlexGrid 
        allowResizing={'None'}
        showAlternatingRows={false}
        isReadOnly={true}
        selectionMode={'ListBox'}
        headersVisibility={'Column'}
        autoGenerateColumns={false}
        columns={[
          {binding:'make', header:'Make', width:"*", visible:false},
          {binding:'model', header:'Model', width:"*"},
          {binding:'price', header:'Price', width:".5*", format: 'n0',
             aggregate: 'Avg'},
        ]}
        itemsSource={this.state.data}
      >
        <FlexGridFilter filterApplied={this.filterApplied}/>
      </FlexGrid>
    </div>
    );
 }
}

앱 헤더에는 간단한 앱 설명과 모델 및 제조업체 수에 대한 요약이 포함되어 있습니다. 사용자가 데이터를 필터링하면 요약 개수가 자동으로 업데이트 됩니다. 헤더 다음에는 그리드의 속성을 초기화하는 "FlexGrid"요소가옵니다.

열 속성에는 각 열의 바인딩, 헤더, 형식 및 너비가 포함됩니다. 가격 열의 aggregate(집계) 속성은 그룹 헤더에 각 제조업체에 대한 평균 가격이 표에 표시됩니다.

"FlexGrid"요소에는 열 필터를 추가하는 "FlexGridFilter"요소가 포함되어 있으므로 사용자가 모델 및 가격별로 그리드 데이터를 필터링 할 수 있습니다. filterApplied 이벤트는 필터가 변경될 때 상태를 업데이트하여, 페이지 상단의 요약을 업데이트되는 데 사용됩니다.