웹 응용 프로그램을 위한 최고의 React DataGrid

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-08-18 16:59 조회 4,647회 댓글 0건

본문

관련링크

릴리스 이후 React는 가장 눈에 띄는 프론트엔드 웹 프레임워크 중 하나로 떠올랐습니다.

React는 지난 몇 년 동안 두각을 나타내는 동안 UI의 출현 이후 DataGrid는 가장 보편적인 시각적 소프트웨어 요소 중 하나가 되었습니다.

React의 인기와 DataGrid 상품은 애플리케이션을 빌드할 때 선택할 수 있는 옵션이 너무 많다는 것을 의미합니다. 그러나 Wijmo의 FlexGrids는 오픈 소스, 상용 및 자체 개발 DataGrid 중에서 한 솔루션이 다른 솔루션보다 우위에 있습니다.

이제 React에서 FlexGrid를 사용할 때의 이점을 살펴보고 FlexGrid가 React 응용 프로그램을 위한 최고의 DataGrid 솔루션인 이유를 보여드리겠습니다.

이 문서는 다음에 대해 이야기합니다.

DataGrid가 UI 요소로 유용한 이유
FlexGrid가 다른 모든 DataGrid 컴포넌트를 능가하는 방법
React 웹 응용 프로그램에서 FlexGrid를 사용하는 것이 얼마나 간단한지 보여주는 예시

GrapeCity의 Wijmo JavaScript UI 라이브러리에 포함된 FlexGrid는 React를 위한 최고의 플러그 앤 플레이 DataGrid입니다.

flexgrid

왜 데이터그리드인가?

소프트웨어 개발자가 아니더라도 여러분은 DataGrid의 패러다임에 노출되어 있습니다.

데이터를 그룹화하고 정렬하는 것은 단지 세심한 작업을 위한 것이 아닌 인간의 본성입니다.

DataGrid는 우리가 최대한 많은 데이터를 효율적으로 받아들이고 이해하도록 하는 본능을 자극합니다.

DataGrid의 유용성과 보편성은 DataGrid가 지금껏 널리 퍼질 수 있도록 해주었지만, 그렇다고 발전이 없는 것은 아닙니다. 디지털 시대의 스크린이 도래함에 따라 DataGrid는 그 어느 때보다 많은 변화를 겪었습니다.

오늘날은 데이터 표시뿐 아니라 편집에도 그리드가 그 어느 때보다 유용한 시대가 되었습니다.

Microsoft Word를 사용하여 판매 보고서 또는 월별 예산을 작성하는 것을 상상할 수 있나요?

정렬, 필터링 및 자동 완성과 같은 자동 편의 기능과 사용자 정의 수식 같은 고급 기능을 갖춘 Microsoft Excel은 대부분의 사용자에게 자연스러운 선택입니다.

대부분의 사용자는 컴퓨터의 DataGrid를 처음 경험했기 때문에 유용하고 시간을 절약하는 기능이 아니더라도 자연스럽게 Excel을 선택할 것입니다.

훌륭한 UX 디자이너나 비즈니스 분석가는 사용자를 교육하는 것은 어렵고 비용이 많이 든다고 말합니다. 이것은 일반적으로 DataGrid의 가장 큰 장점 중 하나는. 직관적이라는 점입니다.

Excel은 DataGrid를 사용하는 소프트웨어의 가장 일반적인 예이지만, 이 패러다임은 소프트웨어 세계 전반에 걸쳐 확산되었습니다.

웹 응용 프로그램이 우리에게 익숙한 기존의 기본 응용 프로그램을 계속 대체함에 따라 DataGrid가 웹 응용 프로그램 UI에도 적용된다는 것은 당연한 일입니다.

GrapeCity에서는 업계 전반에서 DataGrid UI 컴포넌트를 새로운 웹 응용 프로그램 프로젝트에 포함시키고 있습니다.

제조 통계를 추적하거나, 재무 데이터를 분석하거나, 판매 보고서를 작성하기 위한 응용 프로그램을 빌드하든, DataGrid가 가져올 직관성에 대해 이미 생각해 보셨을 것입니다.

또한, Wijmo의 FlexGrid는 최고의 성능으로 최고의 DataGrid UX를 제공하여 투자 대비 효과를 극대화할 수 있습니다.

flexgrid

FlexGrid와 같은 DataGrid 컴포넌트는 인간과 데이터 사이에 자연스럽고 직관적인 인터페이

스를 제공합니다.

Wijmo의 FlexGrid: 최고의 DataGrid 컴포넌트 솔루션

이제 우리는 데이터 그리드를 사용할 때의 가장 큰 장점이 본질적으로 직관적이라는 것을 압니다. 이는 최종 사용자 경험에 큰 장점이 됩니다. 하지만 응용 프로그램을 빌드하고 있는 개발자는 어떨까요?

DataGrid UI 컴포넌트를 처음부터 만드는 것은 모든 개발 팀에게 결코 작은 일이 아닙니다.

응용 프로그램을 위한 DataGrid를 빌드하는 것은 사용자가 생성하는 다른 UI 컴포넌트에 대해 사용자에게 교육하는 것만큼 비용이 많이 들 수도 있습니다.

다행히도 FlexGrid가 있습니다! Wijmo 라이브러리를 응용 프로그램으로 가져오고, FlexGrid를 응용 프로그램에 추가하고, 데이터 소스에 첨부하기만 하면 됩니다.

몇 가지 간단한 단계만 거치면 응용 프로그램에 완전한 기능을 갖춘 DataGrid가 포함됩니다!

DataGrid 사용의 가장 큰 장점이 더 나은 최종 사용자 경험을 만드는 것이라면 타사의 DataGrid를 사용하면 더 나은 개발자 경험을 만들 수 있다는 이점이 있습니다.

이 문서를 계속해나가며 Wijmo의 FlexGrid가 기본 React 상호 운용성을 통해 개발 워크플로의 효율성을 최대화하는 방법을 보여 드리겠습니다.

그러나 먼저 FlexGrid를 플러그 가능한 DataGrid 컴포넌트로써 경쟁 제품과 차별화하는 요소를 살펴보겠습니다.

FlexGrid 패키지 성능: 작은 사용 공간으로 확장성과 친숙함

React의 가장 강력한 DataGrid 컴포넌트는 하룻밤 사이에 만들어지지 않았습니다.

사실 FlexGrid는 Wijmo 자체보다 오래되었습니다.

FlexGrid는 Visual Basic용 C++를 사용하여 1996년에 처음 작성되었습니다. Visual Studio의 일부로 제공되기도 했죠! 그 후 발전하여 많은 플랫폼에서 개선되었으며, 가장 최근의 모습은 JavaScript입니다.

수십 년에 걸친 사용자 입력과 개선을 통해 광범위하게 문서화된 API가 포함된 고성능 DataGrid가 탄생했습니다. 하지만 FlexGrid가 지금까지 그 이름을 유지한 데는 이유가 있습니다. "Flex 철학"를 강조하는 것이 GrapeCity의 최우선 과제입니다.

컨트롤에는 필요한 주요 기능만 포함되고 확장성 모델을 통해 그 밖의 모든 기능을 제공해야 합니다.

정렬, 그룹화, 편집 및 필터링과 같은 기능이 내장되어 있으며, 원하는 모든 요소는 FlexGrid의 선택적 확장 기능으로 쉽게 구현할 수 있습니다. 이를 통해 컨트롤을 작고 빠르게 유지하고 고객과 GrapeCity 모두 고유한 사용자 정의 기능을 빌드할 수 있습니다.

성능

많은 React 개발자들이 프레임워크의 기본 제공 성능과 경량성을 강조하기 위해 이 프레임워크를 선택합니다. FlexGrid는 속도 유지와 작은 사용 공간에 집중함으로써 사용자가 희생할 필요가 없습니다.

Wijmo 개발 팀은 외부 종속성을 요구하지 않으므로 FlexGrid의 사용 공간을 작게 유지합니다. 사실 FlexGrid는 응용 프로그램에 약 25k(gzip으로 압축)만 추가합니다.

React의 컴포넌트 DOM 처리와 마찬가지로 FlexGrid는 모든 자식 요소도 가상화합니다. 수백만 개의 데이터 행을 몇 초 만에 모두 클라이언트에서 로드할 수 있습니다.

이는 React 상호 운용성에 매우 중요합니다. FlexGrid는 React의 고도로 최적화된 가상화 알고리즘과 원활하게 작동하기 때문에 가장 성능이 뛰어난 React DataGrid입니다.

친숙함

FlexGrid는 거의 모든 상호 작용 동작을 Excel을 기반으로 하며, 앞서 언급했듯이 최종 사용자가 사용하는 가장 일반적인 데이터 그리드/데이터 표일 것입니다.

사람들은 스크롤할 때, 클릭할 때, 그리고 특히 클립보드 기능을 포함한 주요 명령어를 사용할 때 특정한 동작을 기대합니다.

Excel은 자체적인 동작을 고안하는 대신 최종 사용자가 DataGrid 사용을 즉시 편하게 느낄 수 있도록 지원합니다.

놀랍게도 많은 DataGrid는 자체 동작을 고안하거나 키보드 작동을 완전히 지원하지 않습니다. 예를 들어 그리드에서 행을 선택하고 아래쪽 화살표 키를 누른 채로 있으면 그리드가 예상대로 작동하지 않을 수 있습니다.

접근성

FlexGrid 컨트롤이 최신의 가장 인기 있는 웹 브라우저 모두에 대한 완벽한 접근성 지원 기능을 제공하게 되어 매우 기쁩니다.

액세스 가능한 DataGrid만큼 조밀하고 복잡한 컨트롤을 만드는 것은 어려우며 다른 DataGrid 컴포넌트는 FlexGrid의 수준의 프레임워크 상호 운용성 및 접근성을 제공하지 못합니다.

FlexGrid and React: Web Development Heaven에서 만든 매치

FlexGrid는 React의 강력한 고성능 렌더 엔진과 원활하게 통합되는 것 이상의 역할을 합니다. DataGrid 컴포넌트를 사용하면 웹 응용 프로그램 UI에 DataGrid를 재미있고 쉽고 간편하게 추가할 수 있습니다.

이제 재미있는 걸 하시죠! FlexGrid의 React 상호 운용성의 이점을 보여주는 몇 가지 구체적인 예를 살펴보겠습니다.

DataGrid 예: create-react-app으로 시작 및 실행

Wijmo는 FlexGrid를 포함한 모든 컴포넌트에 대해 CommonJS 및 ES 모듈과 함께 제공됩니다! 그리고 Wijmo는 React에 대한 상호 운용성 계층으로 작성되었으므로 다른 React 클래스 컴포넌트와 마찬가지로 FlexGrid를 가져올 수 있습니다.

이 모든 것은 몇 가지 간단한 단계로 React 프로젝트를 만들고 FlexGrid를 추가할 수 있음을 의미합니다. Facebook의 무한히 유용한 create-react-app 프로젝트 덕분에 부트스트랩이나 도구 설정에 대해 걱정할 필요가 없습니다.

FlexGrid를 사용하는 것이 얼마나 쉬운지 설명하기 위해 응용 프로그램에 Wijmo를 포함하여 React 응용 프로그램을 설정하고 데이터로 가득 찬 그리드를 화면에 렌더링하는 과정을 살펴보겠습니다.

먼저 고유한 React 응용 프로그램을 만들어야 합니다. 프로젝트의 지정된 위치에서 다음 명령을 실행합니다.

npx create-react-app flexgrid-app

이렇게 하면 "flexgrid-app"이라는 React 응용 프로그램이 설정됩니다.

다음으로 응용 프로그램에 Wijmo를 설치합니다. React 응용 프로그램을 빌드 중이므로 React 모듈만 포함하면 됩니다. 이 작업은 다음 명령을 사용하여 수행됩니다.

npm install @grapecity/wijmo.react.all

축하합니다! 이제 FlexGrid와 해당 API를 포함한 Wijmo의 전체 UI 라이브러리에 액세스할 수 있습니다. JSX 마크업에서도 직접 사용할 수 있습니다! 그 방법은 다음에 알아보겠습니다.

JSX 마크업에서 FlexGrid 선언

위에서 설명한 작업을 계속하면서, 이제 Wijmo 코드를 응용 프로그램 컴포넌트로 가져왔으므로 FlexGrid를 렌더링할 수 있는 방법을 알아보겠습니다.

실제 코드를 작성하기 전에 FlexGrid가 올바르게 표시되도록 Wijmo의 CSS 파일과 함께 사용할 컴포넌트를 가져와야 합니다.

import '@grapecity/wijmo.styles/wijmo.css';
import * as wjcGrid from '@grapecity/wijmo.react.grid';

응용 프로그램 클래스의 render() 함수 내부에 기본 JSX 마크업이 있습니다. 기본 JSX를 삭제하고 다음으로 대체하십시오.

<div>
<wjcGrid.FlexGrid itemsSource={this.state.data} />
</div>

3줄짜리 코드 조각에서 많은 일이 진행되고 있습니다. 마크업에서 컴포넌트를 선언하는 것이 중요한 이유에 대해 이야기하기 전에 예제를 마치겠습니다. 아직 FlexGrid를 제대로 로드하지 못한 부분이 하나 있습니다.

itemsSource 속성이 응용 프로그램 컴포넌트의 속성을 참조한다는 것을 눈치채셨을 것입니다. 현재 응용 프로그램에 대해 정의된 기본 상태가 없으므로 FlexGrid는 데이터 없이 렌더링됩니다! 이 문제를 해결하기 위해 데이터 그리드에 몇 가지 모의 데이터를 추가할 것입니다. 응용 프로그램 클래스 컴포넌트 내에 다음 코드를 추가합니다.

this.state = {
data: [
  { id: Math.floor(Math.random() * 1000, customer: 'Gia Shields', sale: Math.random() * 100000 },
  { id: Math.floor(Math.random() * 1000, customer: 'Jayden Foster', sale: Math.random() * 100000 },
  { id: Math.floor(Math.random() * 1000, customer: 'Selena Casey', sale: Math.random() * 100000 },
]
};

이제 npm start를 실행하여 응용 프로그램을 실행하고 FlexGrid의 모든 장점을 확인해 보세요! React에서 FlexGrid가 제공하는 흥미로운 기능을 탐색하기 전에 마크업에서 복잡한 DataGrid 컨트롤을 완전히 선언할 수 있다는 의미에 대해 생각해 보십시오.

이 응용 프로그램이 작동하는 모습을 빨리 보고 싶으시다면 Stackblitz의 라이브 샘플을 확인하세요.

선언적 마크업은 MVVM 설계 패턴을 따르는 데 이상적이며 보기(마크업) 내에서 컴포넌트를 완전히 구성할 수 있습니다. FlexGrid는 확장되지 않은 자연스러운 JSX 마크업을 사용하여 전체 API를 선언할 수 있도록 지원합니다. 마크업에서 속성을 설정하고 이벤트를 첨부하며 열 등의 하위 컴포넌트를 구성할 수도 있습니다.

컴포넌트 상태에 연결되는 FlexGrid의 itemsSource에 특별한 것이 있다는 것을 이미 짐작하셨을 겁니다. 자세한 내용은 곧 말씀드리겠습니다...

FlexGrid API 이벤트를 컴포넌트 기능에 쉽게 바인딩할 수 있습니다.

FlexGrid 속성을 컴포넌트 상태에 연결하는 것이 너무 쉽기 때문에 FlexGrid 이벤트를 처리기 함수에 연결하는 것도 간단해야 합니다. 마지막 섹션을 읽고 나서 그런 생각을 하셨다면 맞습니다! 응용 프로그램 컴포넌트 상태의 데이터가 props를 통해 FlexGrid에 전달될 수 있는 것처럼 컴포넌트 함수는 FlexGrid 이벤트에 대한 처리기로 전달될 수 있습니다.

시연을 위해 예제에 새 기능을 추가해 보겠습니다. 일부 데이터가 포함된 FlexGrid는 이미 작동 중이므로 FlexGrid API가 즉시 지원하는 수십 개의 이벤트에 액세스할 수 있습니다. 사용자가 데이터 그리드에서 셀 편집을 시작할 때 설명 메시지를 표시하기 위해 beginningEdit와 cellEditEnded 이벤트 중 두 가지를 이용하겠습니다.

그러나 진행하기 전에 응용 프로그램 컴포넌트(App.js에 있음)의 코드가 다음과 같은지 다시 한 번 확인하십시오.

import React from 'react';
import ReactDom from 'react-dom';
import './styles.css';

import '@grapecity/wijmo.styles/wijmo.css';
import * as wjcGrid from '@grapecity/wijmo.react.grid';

class App extends React.Component {
constructor() {
  super();
  this.state = {
    data: [
      { id: Math.floor(Math.random() * 1000, customer: 'Gia Shields', sale: Math.random() * 100000 },
      { id: Math.floor(Math.random() * 1000, customer: 'Jayden Foster', sale: Math.random() * 100000 },
      { id: Math.floor(Math.random() * 1000, customer: 'Selena Casey', sale: Math.random() * 100000 },
    ]
  };
}

render() {
  return (
    <div>
      <wjcGrid.FlexGrid itemsSource={this.state.data} />
    </div>
  );
}
}

export default App;

이제 편집 추적 기능을 추가해 보겠습니다! 먼저 편집 모드에서 셀 좌표와 함께 셀이 편집되고 있는지 여부를 추적하기 위해 응용 프로그램 구성 요소의 상태에 몇 가지 새 속성을 추가해야 합니다. 계속해서 다음 두 속성을 응용 프로그램 클래스의 상태 속성에 추가합니다.

cellEdit: false, // whether or not any cell is in edit mode
editingCell: '', // a string representation of the coordinates for the cell being edited

기본적으로 응용 프로그램이 로드되면 셀이 편집 모드에 있을 수 없다고 가정합니다. 다음으로 셀이 편집 모드에 있을 때 보이는 텍스트 요소를 추가하고 편집 중인 셀이 없을 때는 숨깁니다. 사용자에게 추가 컨텍스트를 제공하기 위해 요소의 텍스트에는 편집 중인 셀의 좌표가 포함됩니다.

도움이 되는 유익한 텍스트가 눈에 띄도록 태그에 배치합니다. FlexGrid JSX 마크업 바로 아래에 다음을 추가합니다.

<h5 style={{ display: this.state.cellEdit ? 'block' : 'none' }}>
Currently editing cell at { this.state.cellEdit }
</h5>

그 모든 코드는 꽤 기초적입니다. 반응 - 식은 죽 먹기였죠?! 이제 마지막을 장식할 새로운 상태 속성을 FlexGrid 이벤트에 연결합니다. 확실히 이것은 복잡한 관찰 가능한 처리기 또는 React 안티 패턴이 필요합니다. 그렇죠?

아닙니다! 사용자가 직접 작성한 React 컴포넌트에서 기대하는 것처럼 FlexGrid 이벤트를 컴포넌트 클래스 기능에 연결할 수 있습니다. 먼저 처리기 기능을 응용 프로그램 클래스에 추가합니다.

beginEdit(grid) {
this.setState({
  cellEdit: true,
  editingCell: '{' + grid.selection.col + ', ' + grid.selection.row + '}',
});
}

finishEdit() {
this.setState({
  cellEdit: false,
});
}

다시 말씀드리면, 일부 간단한 React 컴포넌트 함수는 셀 편집 여부에 따라 상태를 업데이트하도록 설계되었습니다. beginEdit 함수에 전달된 그리드 개체에 주목하세요.

FlexGrid는 관련 컨텍스트를 모든 이벤트 처리기에 자동으로 전달합니다. 특정 이벤트에 대해 어떤 정보가 전달되는지 알아보려면 방대한 FlexGrid API 문서를 참조하세요.

이 유용한 새 기능을 끝내려면 FlexGrid에게 이벤트 처리기를 호출하도록 지시해야 합니다. 다행히 FlexGrid는 기본 React 컴포넌트이므로 이러한 처리기를 마크업으로 쉽게 연결할 수 있습니다. FlexGrid 선언에 다음 속성을 추가하기만 하면 됩니다.

<FlexGrid itemsSource={this.state.data} beginningEdit={this.beginEdit.bind(this)} cellEditEnded={this.finishEdit.bind(this)} />

모든 것이 끝나면 응용 프로그램 클래스는 다음과 같아야 합니다.

import React from 'react';
import ReactDom from 'react-dom';
import './styles.css';

import '@grapecity/wijmo.styles/wijmo.css';
import * as wjcGrid from '@grapecity/wijmo.react.grid';

class App extends React.Component {
constructor() {
  super();
  this.state = {
    data: [
      { id: Math.floor(Math.random() * 1000, customer: 'Gia Shields', sale: Math.random() * 100000 },
      { id: Math.floor(Math.random() * 1000, customer: 'Jayden Foster', sale: Math.random() * 100000 },
      { id: Math.floor(Math.random() * 1000, customer: 'Selena Casey', sale: Math.random() * 100000 }, ]
  };
}

beginEdit(grid) {
  this.setState({
    cellEdit: true,
    editingCell: '{' + grid.selection.col + ', ' + grid.selection.row + '}',
  });
}

finishEdit() {
  this.setState({
    cellEdit: false,
  });
}

render() {
  return (
    <div>
      <wjcGrid.FlexGrid itemsSource={this.state.data} beginningEdit={this.beginEdit.bind(this)} cellEditEnded={this.finishEdit.bind(this)} />
      <h5 style={{ display: this.state.cellEdit ? 'block' : 'none' }}>
        Currently editing cell at { this.state.editingCell }
      </h5>
    </div>
  );
}
}

export default App;

모든 준비가 완료되면 브라우저에서 FlexGrid를 사용하여 응용 프로그램을 실행할 수 있습니다! 실행 중인 이벤트를 보려면 FlexGrid의 셀을 두 번 클릭합니다. beginningEdit 이벤트가 즉시 전달되고 응용 프로그램 컴포넌트의 상태가 업데이트되어 적절한 셀 좌표가 있는 레이블이 표시됩니다. 그리드 외부를 클릭하면 레이블이 사라집니다.

그리드 편집

데이터 바인딩으로 FlexGrid 자동 업데이트

이제 응용 프로그램이 FlexGrid 컴포넌트의 데이터 표시를 처리하고 사용자의 편집 이벤트에 응답하므로 사용자가 판매 데이터 목록에 다른 판매를 추가할 수 있는 폼을 제공하는 것이 도움이 될 수 있습니다. 상태를 업데이트하기 위한 폼을 제공하는 것은 어렵지 않습니다. 하지만 변경 사항이 DataGrid 컴포넌트로 전파되도록 하려면 어떻게 해야 할까요?

이전에 FlexGrid의 state-bound itemsSource 속성으로 돌아갈 것이라고 얘기한 것을 기억하시나요? 상태 속성을 FlexGrid 컴포넌트에 전달하면 자동으로 양방향 바인딩이 제공된다고 생각했다면 정답입니다!

데이터 그리드의 데이터가 이미 상태 속성에 바인딩되어 있기 때문에 응용 프로그램이 해당 속성을 업데이트하기만 하면 FlexGrid가 그에 따라 업데이트됩니다. 시스템의 각 사용자는 주문 ID, 고객 이름 및 판매 가격의 3가지 고유한 특성을 가지므로 응용 프로그램 클래스의 상태에 해당하는 3개의 새 속성을 추가합니다.

saleId: null,
customerName: '',
saleAmount: null,

다음으로 '사용자 추가' 폼의 입력으로 상태를 업데이트하고 응용 프로그램 컴포넌트가 상태 저장 사용자의 배열에 새 개체를 추가할 수 있도록 하는 몇 가지 빠른 함수를 추가합니다.

addSale() {
if(this.state.saleId === null || this.state.customerName.length === 0 || this.state.saleAmount === null) {
  return;
}
this.setState({
  data: [
    ...this.state.data,
    { id: this.state.saleId, customer: this.state.customerName, sale: this.state.saleAmount },
  ],
  saleId: null,
  customerName: '',
  saleAmount: null,
});
}

다시 말해, 이러한 기능은 컴포넌트가 응용 프로그램의 상태를 특정 방식으로 업데이트할 수 있도록 하는 평범하고 오래된 React 컴포넌트 클래스 함수일 뿐입니다. 마지막 단계는 폼에 대한 실제 마크업을 추가하는 것입니다.

<h4>Add Sale</h4>
<div>
<label htmlFor="id">Sale ID: </label>
<input type="text" id="id" value={this.state.saleId} onChange={this.idUpdate.bind(this)} />
</div>
<br />
<div>
<label htmlFor="customerName">Customer Name: </label>
<input type="text" id="customerName" value={this.state.customerName} onChange={this.customerUpdate.bind(this)} />
</div>
<br />
<div>
<label htmlFor="saleAmount">Sale Amount: </label>
<input type="text" id="saleAmount" value={this.state.saleAmount} onChange={this.saleUpdate.bind(this)} />
</div>
<br />
<input type="button" value="Add Sale" onClick={() => this.addSale()} />

또한 onChange 이벤트에 몇 가지 메서드를 연결했습니다. 아래에 요약된 내용을 볼 수 있습니다.

idUpdate(event) {
this.setState({ saleId: event.target.value });
}

customerUpdate(event) {
this.setState({ customerName: event.target.value });
}

saleUpdaet(event) {
this.setState({ saleAmount: event.target.value });
}

이제 모든 작업이 완료되었으므로 응용 프로그램을 실행하기 전에 마지막으로 코드를 살펴볼 준비가 되었습니다.

class App extends React.Component {
constructor(){
  this.state = {
    data: [
      { id: Math.floor(Math.random() * 100), customer: 'Gia Shields', sale: Math.random() * 100000 },
      { id: Math.floor(Math.random() * 100), customer: 'Jayden Foster', sale: Math.random() * 100000 },
      { id: Math.floor(Math.random() * 100), customer: 'Selena Casey', sale: Math.random() * 100000 },
    ],
    cellEdit: false,
    editingCell: '',
    saleId: null,
    customerName: '',
    saleAmount: null
  };
}

beginEdit(grid) {
  this.setState({
    cellEdit: true,
    editingCell: '{' + grid.selection.col + ', ' + grid.selection.row + '}'
  });
}

finishEdit() {
  this.setState({
    cellEdit: false
  });
}

addSale() {
  if(this.state.saleId === null || this.state.customerName.length === 0 || this.state.saleAmount === null) {
    return;
  }
  this.setState({
    data: [
      ...this.state.data,
      { id: this.state.saleId, customer: this.state.customerName, sale: this.state.saleAmount },
    ],
    saleId: null,
    customerName: '',
    saleAmount: null,
  });
}

idUpdate(event) {
  this.setState({ saleId: event.target.value });
}

customerUpdate(event) {
  this.setState({ customerName: event.target.value });
}

saleUpdate(event) {
  this.setState({ saleAmount: event.target.value });
}

render() {
  return(
    <div>
      <wjcGrid.FlexGrid itemsSource={this.state.data} beginningEdit={this.beginEdit.bind(this)} cellEditEnded={this.finishEdit.bind(this)}/>
      <h5 style={{ display: this.state.cellEdit ? 'block' : 'none' }}>
        Currently editing cell at {this.state.editingCell}
      </h5>
      <h4>Add Sale</h4>
      <div>
        <label htmlFor="id">Sale ID:</label>
        <input type="text" id="id" value={this.state.saleId} onChange={this.idUpdate.bind(this)} />
      </div>
      <div>
        <label htmlFor="id">Customer Name:</label>
        <input type="text" id="id" value={this.state.customerName} onChange={this.customerUpdate.bind(this)} />
      </div>
      <div>
        <label htmlFor="id">Sale Amount:</label>
        <input type="text" id="id" value={this.state.saleAmount} onChange={this.saleUpdate.bind(this)} />
      </div>
      <input type="button" value="Add Sale" onClick={() => this.addSale()} />
    </div>
  );
}
}

ReactDom.render(<App />, document.getElementById('root');

모든 것이 좋아 보이면 응용 프로그램을 시작합니다! 사용자로부터 3개의 입력을 수락하는 간단한 폼을 볼 수 있습니다. 작성 후 "판매 추가" 버튼을 클릭하면 그리드가 방금 추가한 새 판매 정보로 즉시 업데이트됩니다. 이것이 기본 양방향 데이터 바인딩을 지원하는 FlexGrid의 마법입니다.

폼이 있는 그리드

우리가 만든 폼은 응용 프로그램의 상태와 FlexGrid 사이의 양방향 데이터 바인딩 설정의 한 방향을 보여줍니다. 다른 방향은 어떻죠? React 개발자 도구을 사용 중이라면 바로 작동 상태를 확인할 수 있습니다!

개발 도구를 열고 응용 프로그램의 상태를 확인합니다. 현재 사용자 개체가 모두 포함된 데이터 배열이 표시되어야 합니다. 그리드의 행 중 하나를 편집하면(셀을 두 번 클릭) 응용 프로그램의 상태가 즉시 업데이트되어 변경 내용이 반영됩니다.

이렇게 하면 다 마친 것입니다! FlexGrid와 React를 통해 빠르고, 쉽고, 자연스러운 양방향 데이터 바인딩이 가능합니다! 더 많은 코드를 제공하지는 않겠지만 마지막으로 FlexGrid로 더 쉽게 수행할 수 있는 방법이 있다는 힌트를 드리겠습니다. 관심이 있다면 FlexGrid의 allowAddNew 속성을 확인하세요.