! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

데이터 그리드 및 차트 웹 응용 프로그램에서 React Hooks를 사용하는 방법 > 온라인 스터디

본문 바로가기

FlexGrid 데이터 그리드 및 차트 웹 응용 프로그램에서 React Hooks를 사용하는 방법

페이지 정보

작성자 GrapeCity 작성일 2022-06-21 15:29 조회 632회 댓글 0건

본문

React에서 버전 16.8을 릴리스했을 때 React Hooks는 프레임워크의 새로운 추가 요소였습니다. 이 기능은 개발자가 컴포넌트에서 State 저장 논리를 추출하여 재사용할 수 있도록 고안되었으며 컴포넌트 계층 구조를 변경할 필요는 없습니다. 함수 컴포넌트에서 React State로 "후크"할 수 있도록 해줍니다.

Wijmo는 항상 계속해서 React를 지원할 것입니다. 이 포스팅에서는 React Hooks를 사용하여 Wijmo의 React DataGrid, FlexGrid 및 차트 컨트롤인 FlexChart를 통합하는 응용 프로그램을 빌드하는 방법에 대해 검토해보겠습니다. 이렇게 하려면 다음 단계를 수행해야 합니다.

  1. React 응용 프로그램 만들기

  2. Wijmo의 CSS 가져오기

  3. 데이터 소스 추가

  4. Wijmo 데이터 그리드 및 차트 구현

  5. 사용자 정의 이벤트를 만들어 컨트롤 연결


React 응용 프로그램 만들기

먼저 응용 프로그램을 만들어 보겠습니다. React 응용 프로그램을 만들 때는 먼저 컴퓨터에 Node >= 14.0.0 및 npm >= 5.6을 설치해야 합니다. 프로젝트를 만들려면 다음 명령을 실행합니다.

npx create-react-app wijmo-app


이렇게 하면 wijmo-app 응용 프로그램이 만들어집니다. 응용 프로그램 설정이 완료되면 다음 명령을 실행하여 응용 프로그램을 시작할 수 있습니다.

cd wijmo-app
npm start


그러면 컴퓨터의 기본 브라우저에서 응용 프로그램이 열립니다.

이제 우리의 응용 프로그램인 Wijmo를 추가할 시간입니다. React만 사용하며 작업했기 때문에 Wijmo의 Interop만 설치하면 됩니다. 이를 위해 다음 명령을 실행합니다.

npm install @grapecity/wijmo.react.all


이제 응용 프로그램을 설정하고 Wijmo를 설치했으니 응용 프로그램을 작성할 시간입니다.


Wijmo의 CSS 가져오기

첫 번째로 할 작업은 Wijmo의 CSS 파일을 가져오는 것입니다. 이 작업을 수행하기 위해 응용 프로그램의 index.css 파일을 엽니다. 파일 상단에 다음 코드 줄을 포함합니다.

@import '@grapecity/wijmo.styles/themes/wijmo.theme.material.css';


Wijmo의 CSS가 응용 프로그램의 주 CSS 파일로 import 되어 빌드한 모든 컴포넌트가 올바르게 스타일화됩니다. 이 응용 프로그램에서는 역시 Wijmo의 테마인 Material 테마 중 하나를 사용할 예정입니다. Wijmo는 CSS 파일을 가져올 때 선택할 수 있는 다양한 수십 가지 테마를 제공합니다. 사용 가능한 항목을 보려면 여기에서 테마 샘플을 확인하시기 바랍니다.


데이터 소스 추가

다음으로 Wijmo 컨트롤에서 스스로 채우기 위해 사용할 데이터 소스를 구현해보겠습니다. 이 샘플에서는 응용 프로그램 내 데이터 소스를 추가하겠습니다. 먼저 data라는 응용 프로그램의 src 폴더 내부에 새 폴더를 만들고 data.js라는 해당 폴더 내부에 파일을 만듭니다.

data.js

이제 데이터 객체를 만들고 데이터를 가져오는 데 사용할 2개의 함수 즉, getData()getChartData()를 만들어 보겠습니다.

var data = [
  { id: 0, country: 'US', gdp: 20.94, hci: 0.926, gini: 0.48, breakdown: [
      { year: '2000', gdp: 10.25, hci: 0.866, gini: 0.46 },
      { year: '2010', gdp: 14.99, hci: 0.916, gini: 0.47 },
      { year: '2022', gdp: 20.94, hci: 0.926, gini: 0.48 }
  ]},
  { id: 1, country: 'UK', gdp: 2.71, hci: 0.932, gini: 0.34, breakdown: [
      { year: '2000', gdp: 1.66, hci: 0.874, gini: 0.39 },
      { year: '2010', gdp: 2.48, hci: 0.766, gini: 0.34 },
      { year: '2022', gdp: 2.71, hci: 0.932, gini: 0.34 }
  ]},
  { id: 2, country: 'China', gdp: 14.72, hci: 0.761, gini: 0.48, breakdown: [
      { year: '2000', gdp: 1.21, hci: 0.588, gini: 0.42 },
      { year: '2010', gdp: 6.09, hci: 0.699, gini: 0.48 },
      { year: '2022', gdp: 14.72, hci: 0.761, gini: 0.48 }
  ]},
];

export function getData() {
   return data;
}

export function getChartData(index) {
   for(var i = 0; i < data.length; i++) {
       if(data[i].id == index) {
           return data[i].breakdown;
      }
  }
   return data[0].breakdown;
}


데이터 소스에는 다양한 국가의 기본 메트릭에 대한 일부 정보가 포함되어 있습니다. getData() 함수는 전체 데이터 객체를 반환합니다. 반대로 getChartData() 메서드는 함수에 전달된 인덱스로 결정된 단일 국가에 대한 분석만 반환합니다. 컨트롤을 채우기 위해 데이터를 수집하도록 다음 섹션에서는 getData() 및 getChartData()를 호출하겠습니다.


Wijmo의 데이터 그리드 및 차트 구현

이제 사용할 컨트롤을 구현할 시간입니다. 이 데모에서는 Wijmo의 React DataGrid, FlexGrid는 물론 FlexChart 및 ComboBox를 사용하겠습니다. 응용 프로그램의 src 폴더 내에서 components라는 또 다른 폴더를 만들고 두 개의 파일 Dataview.jsDataview.css 내에서 만들겠습니다.


Dataview.css


이제 Dataview.js 파일 내에서 사용할 파일 및 컨트롤을 가져오겠습니다.

import { useRef, useState } from 'react';
import { CollectionView } from '@grapecity/wijmo';
import { FlexGrid, FlexGridColumn } from '@grapecity/wijmo.react.grid';
import { FlexChart, FlexChartLegend, FlexChartAxis, FlexChartSeries } from '@grapecity/wijmo.react.chart';
import { FlexChartAnimation } from '@grapecity/wijmo.react.chart.animation';
import { ComboBox } from '@grapecity/wijmo.react.input';
import { getData, getChartData } from '../data/data'


이제 여기에 상당한 양의 가져오기 항목이 있으므로 여기에서 사용하는 항목을 정확하게 나누겠습니다.


React Hooks

useRefuseState 가져오기는 React Hooks에서 State 변수를 만드는 데 사용됩니다. 이를 사용하여 기능 컴포넌트의 State를 관리합니다.


FlexGrid

FlexGrid 컨트롤의 경우에는 CollectionView, FlexGrid 및 FlexGridColumn 가져오기를 사용합니다. 컨트롤용 FlexGrid 가져오기, 데이터 그리드의 열을 관리하는 FlexGridColumn, 데이터 소스용 CollectionView입니다.


FlexChart

FlexChart 컨트롤의 경우 컨트롤 자체, FlexChartLegend, Axis 및 Series에 FlexChart 모듈을 가져와 컨트롤 및 FlexChartAnimation을 사용자 정의할 수 있어 데이터 소스가 변경될 때 컨트롤은 원활한 애니메이션을 사용하여 변경을 표시합니다.


ComboBox

ComboBox의 경우 컨트롤에 ComboBox 가져오기를 사용하고 데이터 소스에 CollectionView를 사용합니다.


데이터 소스

마지막으로 이전 단계에서 만든 데이터 소스를 가져옵니다.

다음으로 마크업에서 컨트롤을 구현하고 데이터 소스를 추가할 시간입니다. 먼저 액세스가 필요한 CollectionViews 및 컨트롤을 관리하는 데 사용할 State를 추가합니다.

function Dataview() {
   const [cv, setCV] = useState(new CollectionView(getData(), {}));
   const [chartCV, setChartCV] = useState(new CollectionView(getChartData(0), {}));
   const flexChart = useRef();
   return (
       <div></div>
  );
}

export default Dataview;


보시다시피 React Hooks를 사용하여 State를 설정하고 CollectionViews 및 FlexChart 컨트롤을 관리합니다. 두 개의 State 변수인 cvchartCV를 만들고 React의 useState() 함수를 사용하여 기본 State 값을 설정합니다. 이 경우에는 CollectionView입니다. 또한 문서의 후반부에서 컨트롤을 업데이트하는 데 사용할 FlexChart 컨트롤에 대한 참조도 만듭니다.

React Hooks로 State 변수를 만들어 이러한 State 객체에 대한 setter 메서드도 설정합니다. 나중에 반환하고 cv 변수에 다른 CollectionView를 설정하려는 경우 setCV 메서드를 호출하여 새 CollectionView에 전달할 수 있습니다.

이제 데이터 소스에 연결되었으며 마크업 내부에서 컨트롤을 구현해보겠습니다.

function Dataview() {
  const [cv, setCV] = useState(new CollectionView(getData(), {}));
  const [chartCV, setChartCV] = useState(new CollectionView(getChartData(0), {}));
  const flexGrid = useRef();
  const flexChart = useRef();
  return (
      <div>
          <div>
              <ComboBox itemsSource={cv} displayMemberPath="country"></ComboBox>
          </div>
          <br></br>
          <div>
              <FlexGrid itemsSource={cv} selectionMode="Row">
                  <FlexGridColumn binding="id" header="ID"></FlexGridColumn>
                  <FlexGridColumn binding="country" header="Country"></FlexGridColumn>
                  <FlexGridColumn binding="gdp" header="GDP (T)"></FlexGridColumn>
                  <FlexGridColumn binding="hci" header="HCI" format="g3"></FlexGridColumn>
                  <FlexGridColumn binding="gini" header="Gini Coefficient" width="*"></FlexGridColumn>
              </FlexGrid>
          </div>
          <br></br>
          <div>
              <FlexChart ref={flexChart} itemsSource={chartCV} bindingX="year" header="Breakdown by Decade">
                  <FlexChartLegend position="Bottom"></FlexChartLegend>
                  <FlexChartAxis wjProperty="axisY" title="HCI/Gini Coefficient" axisLine={true}></FlexChartAxis>
                  <FlexChartSeries binding="hci" name="HCI"></FlexChartSeries>
                  <FlexChartSeries binding="gini" name="Gini"></FlexChartSeries>
                  <FlexChartSeries binding="gdp" name="GDP">
                      <FlexChartAxis wjProperty="axisY" position="Right" title="GDP (T)" axisLine={true} min={0}></FlexChartAxis>
                  </FlexChartSeries>
                  <FlexChartAnimation></FlexChartAnimation>
              </FlexChart>
          </div>
      </div>
  );
}

export default Dataview;


여기에서는 세 개의 컨트롤을 구현합니다. 바로 ComboBox, FlexGrid, FlexChart입니다. FlexGrid와 ComboBox 모두에 itemsSource를 설정하기 위해서는 cv 변수를 사용하겠습니다. 이렇게 하면 이 두 개의 컨트롤을 함께 바로 묶을 수 있으므로 ComboBox 선택이 변경되면 FlexGrid에서 선택한 행이 일치되도록 변경됩니다. 또한 chartCV 변수를 사용하여 FlexChart의 itemsSource 속성을 설정합니다.

FlexGrid 및 FlexChart에 대해 설정하는 몇 가지 추가 속성도 있습니다. 데이터 그리드의 경우에는 열에 대한 일부 서식 지정만 설정합니다. 차트의 경우 차트에 표시할 다양한 계열을 설정합니다. 이 경우에는 국가의 GDP, HCI 및 Gini 계수 통계입니다. 보시다시피 FlexChart에서 두 번째 Y축도 설정합니다. HCI, Gini 및 GDP를 측정하는 배율이 다양하기 때문입니다. 다행히 FlexChart는 이와 같은 상황에 여러 Y축을 지원합니다.

이제 응용 프로그램을 실행하면 다음 내용을 확인할 수 있습니다.

Flexchart

안타깝게도 ComboBox 및 FlexGrid가 연결되어 변경 사항을 반영하도록 업데이트되는 반면 FlexChart는 선택한 국가를 반영하도록 업데이트되지 않습니다. 다음 섹션에서는 FlexChart가 선택 항목과의 일치를 위해 업데이트할 수 있도록 몇 가지 사용자 정의 이벤트를 만들어 보겠습니다.


사용자 정의 이벤트를 만들어 컨트롤 연결

마지막 단계는 FlexGrid 및 ComboBox와 FlexChart를 연결하는 것입니다. 이를 수행하기 위해 사용자 정의 이벤트를 ComboBox의 selectedIndexChanged() 이벤트에 추가하고 또다른 이벤트를 FlexChart의 itemsSourceChanged() 이벤트에 추가하겠습니다.

마크업

<div>
    <ComboBox itemsSource={cv} displayMemberPath="country" selectedIndexChanged={selectedIndexChanged}></ComboBox>
</div>
...
<div>
    <FlexChart ref={flexChart} itemsSource={chartCV} bindingX="year" header="Breakdown by Decade" itemsSourceChanged={itemsSourceChanged}>
        <FlexChartLegend position="Bottom"></FlexChartLegend>
        <FlexChartAxis wjProperty="axisY" title="HCI/Gini Coefficient" axisLine={true}></FlexChartAxis>
        <FlexChartSeries binding="hci" name="HCI"></FlexChartSeries>
        <FlexChartSeries binding="gini" name="Gini"></FlexChartSeries>
        <FlexChartSeries binding="gdp" name="GDP">
            <FlexChartAxis wjProperty="axisY" position="Right" title="GDP (T)" axisLine={true} min={0}></FlexChartAxis>
        </FlexChartSeries>
        <FlexChartAnimation></FlexChartAnimation>
    </FlexChart>
</div>

JS

function selectedIndexChanged(s, e) {
   flexChart.current.control.collectionView.sourceCollection = getChartData(s.selectedIndex);
}
function itemsSourceChanged(s, e) {
   s.refresh();
}


여기에서 ComboBox selectedIndex 값이 변경되면 selectedIndexChanged() 메서드를 호출합니다. 사용자가 ComboBox 선택을 변경하거나 데이터 그리드에서 다른 행을 선택하는 경우 이 인덱스가 변경되므로 이 이벤트는 양쪽의 경우를 발생시켜 단일 이벤트에서 FlexGrid, FlexChart 및 ComboBox를 함께 묶을 수 있습니다. 내부에서는 새로 선택한 국가의 분석을 기반으로 FlexChart의 sourceCollection에 대한 값만 업데이트합니다. itemsSource 속성이 변경되면 FlexChart에서 새로 고침을 강제로 적용하므로 FlexChart에서 새 국가의 값을 적절히 반영합니다.

이제 데이터 그리드 또는 드롭다운에서 다양한 값을 선택하는 경우 차트도 선택한 국가의 정보 분석을 반영하도록 변경됩니다.

img

img

이제 다 끝났습니다! React Hooks와 함께 Wijmo를 사용하는 것은 React 컴포넌트 클래스와 함께 Wijmo를 사용하는 것만큼 간단합니다. 아래 링크를 통해 위에서 만든 응용 프로그램을 다운로드하여 확인해 보실 수 있습니다.

샘플 다운로드




지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.