React App의 스프레드시트

당신이 소규모 소프트웨어 공급 업체에서 일하는 소프트웨어 엔지니어라고 가정해보세요. 어느 날 회사는 새로운 웹 애플리케이션에 대한 제안을 요청하는 대기업 고객으로부터 이메일을 받습니다. 애플리케이션을 ReactJS로 작성해야 하며 Excel 가져오기 / 내보내기 기능이 있는 스프레드시트를 갖춘 일부 화면이 포함되어 있습니다. 이 앱은 Excel 스프레드시트의 동작과 유사해야 합니다.

이러한 요청에 대한 고객의 동기를 살펴 보겠습니다. React는 현재 가장 인기 있는 프론트엔드 라이브러리/프레임워크입니다. 지난 몇 년 동안 IT 전공 학생부터 대기업에 이르기까지 모든 사람들이 React를 채택하고 있습니다. React는 기술, 생산성 제품군 및 맞춤형 LOB (Line-of-Business) 앱에 많은 투자를 하는 기업에서 점점 더 많이 사용되고 있습니다.

회사 사용자는 전문 비즈니스 애플리케이션뿐만 아니라 스프레드시트, 차트 및보고 애플리케이션과 같은 범용 도구를 사용하여 작업합니다. 기업은 ResactJS를 채택하면서 직원이나 고객에게 친숙한 기능을 제공하는 생산성 도구를 제공하는 타사 공급업체를 찾는 경우가 많습니다. 그러나 이러한 사용자는 종종 일상적인 요구 사항에 기대되는 사용자 환경을 제공하지 않는 앱으로 작업해야 합니다.

React를 위한 스프레드시트 컴포넌트

SpreadJS 는 React 개발자에게 강력한 스프레드시트 기능을 제공합니다. LOB(Line-of-Business) 애플리케이션은 지루하고 정적인 테이블 대신 대화형 스프레드시트를 내장하면 많은 이점을 얻을 수 있습니다. 하지만 개발자들이 더 나은 무언가가 가능하다는 것을 깨닫지 못하기 때문에 결국 비즈니스 애플리케이션에는 정적인 테이블을 사용하게 됩니다.

이 포스팅에서는 ReactJS에 대한 기본 지식이 이미 있다고 가정할 것입니다. 기존 React 앱을 사용하고 스프레드시트를 추가하는 방법을 보여줌으로써 정적 테이블 접근 방식을 개선시키는 데 도움이 되길 바랍니다. 

코딩을 시작하기 전에 몇 가지 SpreadJS의 강력한 기능들을 살펴 보겠습니다.

450개 이상의 함수를 지원하는 강력한 계산 엔진

SpreadJS의 최적화된 엔진은 앱을 드래그하지 않고도 가장 복잡한 수식에도 컴퓨팅 성능을 향상시키고 다른 스프레드시트 컴포넌트보다 많은 함수를 지원하며 사용자 정의 함수를 지원합니다.

JavaScript 스프레드시트에서 Excel 파일 가져오기 / 내보내기

JavaScript 스프레드시트에서 Excel 가져오기/내보내기 기능은 필수적입니다. Excel 스프레드시트를 그대로 가져올 수 있고, SpreadJS 스프레드시트를 XLSX로 내보내는 것 또한 가능합니다.

차트 및 스파크라인으로 데이터 시각화

대화형 차트 및 스파크라인을 통해 데이터로부터 새로운 인사이트를 얻을 수 있습니다. 대부분의 Excel 차트, 상호작용 및 애니메이션을 사용하면 대시보드 및 분석 스프레드시트가 더욱 유의미하게 사용될 수 있습니다.

세계화 기능 내장

사용 가능한 문화권 중에서 선택을 하거나, 사용자 정의를 통해 날짜 마스크, 언어, 숫자 구분 기호, 통화 등을 조정할 수 있습니다.

데이터 시각화 컨트롤

테이블, 필터링, 조건부서식 및 셰이프를 활용하여 Excel과 유사한 환경을 제공할 수 있습니다.

React 앱에 SpreadJS 추가하기

StackBlitz에서 실행 중인 정적 테이블 앱을 볼 수 있으며 데모 소스는 여기에서 다운 받을 수 있습니다. 

또는 GitHub 레포지토리에서 코드 사본을 다운로드하거나 복제할 수 있습니다. 

이 작업을 마친 후, 터미널을 열고 레포지토리를 복제한 디렉토리로 이동하여 다음 명령을 실행합니다.

> npm install

SpreadJS 체험판은 StackBlitz에서 작동하지 않으므로 로컬 호스트에서 작업해야 합니다. React 앱 작성 템플릿을 기반으로 하는 앱을 사용하여 로컬로 개발하도록 하겠습니다.

이제 업데이트된 앱이 작동하는 것을 볼 수 있습니다.

1 단계 : 정적 코드

 

이 애플리케이션의 프론트엔드는 ReactJS를 기반으로 하며 JavaScript와 HTML 코드의 조합 인 JSX 구문으로 작성된 컴포넌트로 구성되어 있습니다. 애플리케이션은 기능적 컴포넌트의 구문을 사용하여 작성되었습니다. 이 방법을 사용하면 복잡하고 읽기 어려운 클래스 작성을 할 필요가 없습니다.

대시 보드는 JSX 컴포넌트 계층 구조의 상단에 있습니다. HTML 컨텐츠를 렌더링하고 더미 JSON 판매 데이터가 있는 파일에서 시작되는 애플리케이션 상태를 유지합니다.

각 하위 컴포넌트는 해당 내용을 렌더링해야 합니다. 대시 보드만 앱의 상태를 유지하므로 props를 통해 데이터를 각 하위 컴포넌트로 전달합니다.

import React, { useState } from 'react';
import { NavBar } from './NavBar'
import { TotalSales } from './TotalSales'
import { SalesByCountry } from './SalesByCountry'
import { SalesByPerson } from './SalesByPerson'
import { SalesTable } from './SalesTable'
import { groupBySum } from "../util/util";
import { recentSales } from "../data/data";
export const Dashboard = () => {
    const sales = recentSales;
    function totalSales() {
      const items = sales;
      const total = items.reduce(
        (acc, sale) => (acc += sale.value),
        0
      );
      return parseInt(total);
    };
    function chartData() {
      const items = sales;
      const groups = groupBySum(items, "country", "value");
      return groups;
    };
    function personSales() {
      const items = sales;
      const groups = groupBySum(items, "soldBy", "value");
      return groups;
    };
    function salesTableData() {
      return sales;
    };
    return (
        <div style={{ backgroundColor: '#ddd' }}>
            <NavBar title="Awesome Dashboard" />
            <div className="container">
                <div className="row">
                    <TotalSales total={totalSales()}/>
                    <SalesByCountry salesData={chartData()}/>
                    <SalesByPerson salesData={personSales()}/>
                    <SalesTable tableData={salesTableData()}/>
                </div>
            </div>
        </div>
    );
}

위에서 볼 수 있듯이, SalesTable 컴포넌트의 데이터는 JSON 파일의 데이터에서 직접 얻은 개별 판매를 표시합니다. 먼저, totalSales , chartData 및 personSales 함수는 원시 판매 데이터를 사용합니다. 그런 다음 TotalSales , SalesByCountry 및 SalesByPerson 패널 결과에 대한 계산을 각각 제공합니다.

JSX 구문을 사용하면 문자열을 연결하지 않고도 코드에서 직접 HTML 내용을 반환할 수 있습니다. props가 중괄호 안의 HTML 세그먼트에 삽입되고 각 컴포넌트에 정적 데이터로 전달되는 방법을 볼 수 있습니다. 페이지 하단에 표시되는 SalesTable 패널은 판매 세부 정보를 정적으로 표시합니다.

다음 단계에서는 SalesTable 정적 그리드를 대화형 워크 시트로 바꿔보겠습니다.

2 단계 : Static에서 SpreadSheet로

코드를 작성하기 전에 먼저 GrapeCity의 Spread.Sheets Wrapper Components for React를 설치해야 합니다. 앱을 중지하고 다음 두 명령을 실행하세요.

> npm install @grapecity/spread-sheets-react
> npm start

SpreadJS를 사용하기 전에 GrapeCity 컴포넌트의 import를 선언하기 위해 SalesTable.js 파일을 수정해야 합니다. 이러한 Import를 통해 SpreadJS 라이브러리의 SpreadSheets, Worksheet 및 Column 개체에 액세스 할 수 있습니다.

import React from 'react';
import { TablePanel } from "./TablePanel";
// SpreadJS imports
import '@grapecity/spread-sheets-react';
/* eslint-disable */
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import { SpreadSheets, Worksheet, Column } from '@grapecity/spread-sheets-react';

또한 SpreadJS 워크시트는 몇 가지 기본 설정을 하지 않으면 제대로 작동하지 않으므로 워크 시트 매개 변수를 보유할 구성 오브젝트를 작성해줍니다.

export const SalesTable = ({ tableData } ) => {
    const config = {
        sheetName: 'Sales Data',
        hostClass: ' spreadsheet',
        autoGenerateColumns: false,
        width: 200,
        visible: true,
        resizable: true,
        priceFormatter: '$ #.00',
        chartKey: 1
    }

먼저, SalesTable 컴포넌트 내에 정적 패널을 렌더링하는 JSX 코드를 제거해야 합니다.

return (
    <TablePanel title="Recent Sales">
        <table className="table">
            <thead>
            <tr>
                <th>Client</th>
                <th>Description</th>
                <th>Value</th>
                <th>Quantity</th>
            </tr>
            </thead>
            <tbody>
            {tableData.map((sale) =>
            (<tr key={sale.id}>
                <td>{sale.client}</td>
                <td>{sale.description}</td>
                <td>${sale.value}</td>
                <td>{sale.itemCount}</td>
            </tr>))}
            </tbody>
        </table>
    </TablePanel>
);

이 코드 블록을 제거하면 TablePanel 만 사용하게 되는데, 이는 각 컴포넌트에서 사용하는 일반적인 UI wrapper일 뿐입니다.

return (
    <TablePanel title="Recent Sales">
    </TablePanel>
);

이제 SpreadJS SpreadSheets 컴포넌트를 TablePanel에 삽입할 수 있습니다. Excel 통합 문서에 하나 이상의 워크 시트가있는 것처럼 SpreadSheets 컴포넌트에도 하나 이상의 워크 시트가 포함될 수 있습니다.

return (
    <TablePanel key={config.chartKey} title="Recent Sales">
        <SpreadSheets hostClass={config.hostClass}>
            <Worksheet name={config.sheetName} dataSource={tableData} autoGenerateColumns={config.autoGenerateColumns}>
                <Column width={50} dataField='id' headerText="ID"></Column>
                <Column width={200} dataField='client' headerText="Client"></Column>
                <Column width={320} dataField='description' headerText="Description"></Column>
                <Column width={100} dataField='value' headerText="Value" formatter={config.priceFormatter} resizable="resizable"></Column>
                <Column width={100} dataField='itemCount' headerText="Quantity"></Column>
                <Column width={100} dataField='soldBy' headerText="Sold By"></Column>
                <Column width={100} dataField='country' headerText="Country"></Column>                   
            </Worksheet>
        </SpreadSheets>
    </TablePanel>
);

마무리로 App.css 파일에 아래 행을 추가하여 스프레드시트 사이즈를 수정하여 이 컴포넌트가 하단 패널의 전체 너비와 판매 대시 보드 페이지의 적절한 높이를 차지하도록 합니다.

/*SpreadJS Spreadsheet Styling*/ 
.container.spreadsheet {
    width: 100% !important;
    height: 400px !important;
    border: 1px solid lightgray !important;
    padding-right: 0;
    padding-left: 0;
}

이러한 과정을 거치면, 아래 이미지와 같이 멋진 스프레드시트를 확인할 수 있습니다.

SpreadJS 워크시트가 Excel 스프레드시트와 얼마나 동일한 모양과 느낌을 제공하는지 유의하세요.

워크 시트 내에서 너비, 바인딩 필드 및 헤더 텍스트와 같은 각 열의 특성을 정의하는 열 컴포넌트를 볼 수 있습니다. 또한 판매 값(Value) 열에 통화 형식을 추가했습니다.

이전 정적 테이블과 마찬가지로 새 SpreadJS 스프레드시트 컴포넌트는 대시보드에서 전달 된 props로부터 데이터를 받습니다. 보다시피 스프레드시트를 사용하면 Excel 스프레드시트에서와 마찬가지로 값을 직접 변경할 수 있습니다. 그러나 React 애플리케이션에서 예상 한대로 이러한 변경 사항은 다른 컴포넌트에 자동으로 반영되지 않습니다.

왜 그럴까요?

대시 보드에서 데이터를 수신 한 후 SpreadJS 워크 시트는 대시 보드 컴포넌트에 선언된 판매 데이터가 아닌 복사본으로 작업을 시작합니다. 모든 데이터 수정은 앱의 상태를 적절히 업데이트하기 위해 이벤트와 함수에 의해 처리되어야 합니다.

다음 작업에서, 모든 Dashboard 컴포넌트에서 SpreadJS 워크시트의 변경 사항을 애플리케이션에 반영하도록 하겠습니다.

3 단계 : Reactive Binding이 있는 스프레드시트

현재 대시보드에 선언된 판매 상수는 애플리케이션의 상태를 유지보수합니다.

const sales = recentSales;

보시다시피 이 구조는 정적 데이터를 의미하므로 우리가 구현하고자 하는 동적 업데이트를 방지합니다. 따라서 해당 코드 줄을 hook 이라는 할당으로 바꿔줍니다. React에서 hook에는 상태 값과 핸들러 함수를 동시에 선언하는 단순화 된 구문이 있습니다.

const[sales, setSales] = new useState(recentSales);

위의 코드 행은 JavaScript 배열 구조화 구문을 보여줍니다. useState 함수는 상태 데이터를 보관하는 판매 상수와 판매 배열을 변경하는 기능을 참조하는 setSales를 선언하는 데 사용됩니다. 모두 한 줄로 되어 있습니다.

그러나 이 useState 함수는 아직 애플리케이션에 없기 때문에 컴포넌트 파일의 시작 부분에 React 패키지에서 import 합니다.

import React, { useState } from 'react';

이제 필요한 경우 판매 배열의 상태를 업데이트 할 준비가 되었습니다.

나머지 대시보드에 워크시트의 변경 사항을 전파하려고 합니다. 워크시트 컴포넌트 셀의 변경 사항을 감지하고 해당 이벤트 처리를 구현하려면 이벤트를 구독해야 합니다.

이벤트 핸들러 handleValueChanged를 호출합니다.

<SpreadSheets hostClass={config.hostClass} valueChanged={handleValueChanged}>

같은 이름의 함수를 구현해야 합니다. 그 안에 변경된 워크시트의 데이터 소스 배열을 가져 와서 이 배열을 valueChangeCallback이라는 함수에 전달합니다.

function handleValueChanged(e, obj) {
    valueChangedCallback(obj.sheet.getDataSource());
}
handleValueChanged.bind(this);

그런 다음 valueChangedCallback 함수가 대시 보드에서 SalesTable 컴포넌트로 전달됩니다.

<SalesTable tableData={salesTableData()} 
    valueChangedCallback={handleValueChanged}/>

이제 이 콜백 함수를 SalesTable 컴포넌트의 매개 변수로 전달해야 합니다.

export const SalesTable = ({ tableData, valueChangedCallback } ) => {

워크 시트에서 셀을 변경하면 콜백 함수가 트리거되어 대시보드 컴포넌트에서 handleValueChanged 함수가 실행됩니다. 아래 handleValueChanged 함수는 대시보드 컴포넌트에서 작성해야 합니다. setSales() 함수를 호출하여 컴포넌트의 상태를 업데이트합니다. 결과적으로 변경 사항이 애플리케이션의 다른 컴포넌트에 전파됩니다.

    function handleValueChanged(tableData) {
        setSales(tableData.slice(0));
    }

4 단계 : Excel 가져오기 / 내보내기 기능 추가

지금까지 정적 판매 테이블을 SpreadJS 스프레드시트로 바꾸는 방법을 살펴 보았습니다. 또한 React의 hook 및 콜백을 통해 애플리케이션 컴포넌트에 데이터 업데이트를 전파하는 방법을 배웠습니다. 그리고 우리는 이러한 기능을 아주 짧은 코드로 제공했습니다. 애플리케이션은 이미 멋져 보이며 미래의 고객에게 깊은 인상을 줄 것이라고 확신하지만, 조금 더 기능을 추가해보겠습니다.

기업 사용자들이 일상 생활에서 Excel과 함께 일하는 경우가 많다는 것은 이미 알고 계실 것입니다. 기업 사용자가 React 와 SpreadJS 로 만든 새 앱을 사용하는 경우, 언젠가 Excel과 대시보드가 통합되지 않게 될 수 있습니다. 

스프레드시트 데이터를 Excel로 내보내고 Excel에서 SpreadJS로 데이터를 가져올 수 있게 되면, 애플리케이션이 훨씬 강력해집니다. 이런 기능을 어떻게 구현할 수 있을까요?

앱을 다시 한 번 중지하고 파일 보호기 패키지와 함께 GrapeCity의 Spread.Sheets Client-Side Excel IO 패키지를 설치합니다.

> npm install @grapecity/spread-excelio
> npm install file-saver
> npm start

애플리케이션에서 Excel 파일 (.xlsx 확장자)로 데이터를 내보내려면 SalesTable 컴포넌트를 수정하여 Excel.IO 및 파일 보호기 컴포넌트에 대한 import를 선언해야 합니다.

import Excel from "@grapecity/spread-excelio";
import { saveAs } from 'file-saver';

다음으로, SalesTable.js 파일의 JSX 코드를 변경하여 SpreadJS 워크시트 데이터를 로컬 파일로 내보내는 버튼을 추가합니다. 해당 버튼을 클릭하면 exportSheet라는 이벤트 핸들러가 트리거됩니다.

    .
    .
    .
    {/* EXPORT TO EXCEL */}
    <div className="dashboardRow">
        <button className="btn btn-primary dashboardButton" 
          onClick={exportSheet}>Export to Excel</button>
    </div>
</TablePanel>

exportSheet 함수는 워크 시트의 데이터를 SalesData.xslx라는 파일에 저장합니다. 이 함수는 Spread 객체의 데이터를 JSON 형식으로 직렬화한 다음 Excel.IO 객체를 통해 Excel 형식으로 변환하여 시작합니다.

function exportSheet() {
    const spread = _spread;
    const fileName = "SalesData.xlsx";
    const sheet = spread.getSheet(0);
    const excelIO = new Excel.IO();
    const json = JSON.stringify(spread.toJSON({ 
        includeBindingSource: true,
        columnHeadersAsFrozenRows: true,
    }));
    excelIO.save(json, (blob) => {
        saveAs(blob, fileName);
    }, function (e) {  
        alert(e);  
    });     
} 

Note how the above function requires a spread object, which must be the same instance of the SpreadJS worksheet we are using in the SalesTable component.. SpreadSheet 객체가 정의되면 위 목록에 있는 getSheet (0) 호출이 스프레드시트 배열에서 첫 번째 워크시트를 검색합니다.

const sheet = spread.getSheet(0);

어떻게 SpreadSheet 인스턴스를 프로그래밍 방식으로 얻을 수 있을까요?

SpreadSheet 객체가 초기화되면 SpreadJS 라이브러리는 workbookInitialized라는 이벤트를 트리거합니다. 이를 처리하고 인스턴스를 SalesTable 컴포넌트의 상태로 저장해야 합니다. 먼저 useState hook를 사용하여 스프레드시트 인스턴스의 상태 const를 선언해 보겠습니다.

const [_spread, setSpread] = useState({});

그러나, useState 함수는 아무 데서도 나오지 않습니다. SalesTable 컴포넌트 파일의 시작 부분에서 React 선언으로 가져와야 합니다.

import React, { useState } from 'react';

이제 workbookInit 이벤트를 처리하는 함수를 선언할 수 있습니다.

function workbookInit(spread) {
    setSpread(spread)
}

또한, workbookInit 이벤트를 방금 만든 함수에 바인딩합니다.

<SpreadSheets hostClass={config.hostClass} workbookInitialized={workbookInit} valueChanged={handleValueChanged}>

이제 Excel로 내보내기 버튼은 다음과 같습니다.

이제 Excel 데이터 가져오기를 구현하는 방법을 보여 드리겠습니다. 이 과정은 내보내기와 반대이므로 XLSX 파일부터 시작하겠습니다.

이 기능의 액세스 포인트는 SalesStable 컴포넌트의 JSX 코드 끝에 추가해야 하는 또 다른 버튼입니다. 여기서는 파일 유형을 선택하는 버튼을 생성하는 "파일" 유형의 input 요소인 다른 버튼 유형을 사용합니다. 파일을 선택하면 onChange 이벤트가 fileChange 이벤트 핸들러를 시작합니다.

<div className="dashboardRow">
    {/* EXPORT TO EXCEL */}
    <button className="btn btn-primary dashboardButton" 
      onClick={exportSheet}>Export to Excel</button>
    {/* IMPORT FROM EXCEL */}
    <div>
        <b>Import Excel File:</b>
        <div>
            <input type="file" className="fileSelect" 
              onChange={(e) => fileChange(e)} />
        </div>
    </div>
</div>

fileChange 함수는 Excel.IO 객체를 사용하여 파일을 시트 객체로 가져옵니다. 함수가 끝나면 fileImportedCallback 이벤트가 트리거되어 데이터를 Dashboard 컴포넌트로 가져옵니다.

function fileChange(e) {
    if (_spread) {
        const fileDom = e.target || e.srcElement;
        const excelIO = new Excel.IO();
        const spread = _spread;
        const deserializationOptions = {
            frozenRowsAsColumnHeaders: true
        };
        excelIO.open(fileDom.files[0], (data) => {
            const newSalesData = extractSheetData(data);
            fileImportedCallback(newSalesData);
        });
    }
}

그러나 이 콜백은 SalesTable 컴포넌트의 매개 변수로 선언해야 합니다.

export const SalesTable = ({ tableData, valueChangedCallback, 
    fileImportedCallback } ) => {

또한, util.js 파일에서 importSheetData 함수를 가져 와서 salesTable 컴포넌트에 extractSheetData 함수를 제공해야 합니다.

import { extractSheetData } from "../util/util.js";

대시보드 컴포넌트에서 저장된 파일에 대한 이벤트 핸들러를 구현합니다. 이 함수가 하는 유일한 일은 SpreadJS 워크시트에서 오는 데이터로 대시보드의 상태를 업데이트하는 것입니다.

function handleFileImported(newSales) {
    setSales(newSales.slice(0));
}

<SalesTable tableData={salesTableData()} 
    valueChangedCallback={handleValueChanged}
    fileImportedCallback={handleFileImported}/>

몇 가지 간단한 단계를 거쳐 정적 데이터가 포함된 지루한 앱을 Excel 가져오기 및 내보내기 기능이 있는 스프레드시트 중심의 반응형 앱으로 전환했습니다. 마지막으로, 고객의 요청을 검토하고 앱이 모든 요구 사항을 충족하는지 확인해야 할 것입니다.

우리는 이러한 아이디어를 확장하고 애플리케이션에 대한 다른 흥미로운 기능을 찾아볼 수 있습니다. 예를 들어, 워크 시트 데이터를 자동 저장하여 필요할 때 테이블에 발생한 변경 로그 및 롤백 실수를 저장합니다. 또한 SpreadJS 이벤트를 사용하여 테이블 형식 데이터를 원격 데이터베이스와 동기화할 수 있습니다. 또는 웹 서비스 메소드를 통해 테이블 ​​데이터를 외부 시스템에 복제하기 위해 저장 단추를 구현할 수도 있습니다.

다른 포스팅 시리즈에서는 다른 프레임 워크에서 Excel 스프레드시트 가져오기/내보내기를 구현하는 방법을 살펴볼 수 있습니다.

• C#을 사용하는 WinForms 앱에서
• JavaScript
• Angular
• Vue