React | 시작하기 | SpreadJS 데모

SpreadJS React 컴포넌트 시작하기

완벽한 스프레드시트 경험을 제공하기 위해 아래 단계를 수행하여 React 응용 프로그램에 Excel과 같은 스프레드시트를 얼마나 쉽게 통합할 수 있는지 살펴봅니다.

단계

React 응용 프로그램 만들기 - 새 React 응용 프로그램은 Create React App 도구를 사용하여 만들 수 있습니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 기본 옵션이 포함된 React 응용 프로그램을 만듭니다. 자세한 내용은 React 앱 만들기 사이트에서 시작하기를 참조하십시오.
```
npm init react-app sjs-react-app
//yarn을 사용한다면
yarn create react-app sjs-react-app
cd sjs-react-app
```
SpreadJS npm 패키지 설치 - React SpreadJS 컴포넌트는 @mescius/spread-sheets-react npm 패키지를 통해 배포됩니다. 주요 @mescius/spread-sheets 패키지는 핵심 기능을 제공합니다. 이 패키지의 최신 버전을 설치하려면 응용 프로그램의 루트 폴더에서 다음 명령을 실행합니다.
```
npm install @mescius/spread-sheets-react @mescius/spread-sheets
//yarn을 사용한다면
yarn add @mescius/spread-sheets-react @mescius/spread-sheets
```

응용 프로그램에 SpreadJS React 컴포넌트 추가/초기화 - src 폴더 내의 App.js 파일을 연 후, App.js 내부의 내용을 아래 코드로 대체합니다.

import './App.css';
import * as GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

function App() {
  let hostStyle = {
    width: '100%',
    height: '600px',
    border: '1px solid darkgray'
  }

  let initSpread = function (spread) {
    let sheet = spread.getActiveSheet();
    sheet.getCell(0, 0).vAlign(GC.Spread.Sheets.VerticalAlign.center).value('Hello SpreadJS!');
  }

  return (
    <div className="App">
      <SpreadSheets workbookInitialized={spread => initSpread(spread)}  hostStyle={hostStyle}>
        <Worksheet></Worksheet>
      </SpreadSheets>
    </div>
  );
}

export default App;

한국어 설정하기

단계

setValue 메서드를 사용하여 셀의 값과 setFormula를 설정하여 계산합니다.

initSpread: function (spread) {
  let sheet = spread.getActiveSheet();
  //값 설정하기 - Text
  sheet.setValue(1, 1, "값 설정하기");
  //값 설정하기 - Number : B3에 "Number" 라는 텍스트를, C3에 23이라는 숫자를 삽입합니다.
  sheet.setValue(2, 1, "Number");
  sheet.setValue(2, 2, 23);
  sheet.setValue(3, 1, "Text");
  sheet.setValue(3, 2, "GrapeCity");
  sheet.setValue(4, 1, "Datetime");
  //값 설정하기 - DateTime : B5에 "Datetime" 이라는 텍스트를, C5에 오늘 날짜를 삽입합니다.
  sheet.getCell(4, 2).value(new Date()).formatter("yyyy-mm-dd");
}

스타일 설정하기

SpreadJS에서 제공하는 함수를 사용하면 데이터를 보다 유용하고 매력적으로 표시할 수 있습니다.

단계

아래와 같이 시트의 스타일을 설정합니다.
위에서 작성하던 initSpread 함수 내부에 이어서 작성합니다.

initSpread: function (spread) {
   //spread 초기화
   let sheet = spread.getActiveSheet();
   //값 설정하기 - Text
   sheet.setValue(1, 1, "값 설정하기");
   //값 설정하기 - Number : B3에 "Number" 라는 텍스트를, C3에 23이라는 숫자를 삽입합니다.
   sheet.setValue(2, 1, "Number");
   sheet.setValue(2, 2, 23)
   sheet.setValue(3, 1, "Text");
   sheet.setValue(3, 2, "GrapeCity")
   sheet.setValue(4, 1, "Datetime");
   //값 설정하기 - DateTime : B5에 "Datetime" 이라는 텍스트를, C5에 오늘 날짜를 삽입합니다.
   sheet.getCell(4, 2).value(new Date()).formatter("yyyy-mm-dd");
   // 스타일 설정하기
   // B열, C열의 너비를 200으로 설정합니다.
   sheet.setColumnWidth(1, 200);
   sheet.setColumnWidth(2, 200);
   // B2:C2의 배경색과 글자색을 설정합니다.
   sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
   // B4:C4의 배경색을 설정합니다.
   sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
   // B2:C2의 셀을 병합합니다.
   sheet.addSpan(1, 1, 1, 2);
   // 각 범위에 테두리를 설정합니다.
   sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
     all: true
   });
   sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
     inside: true
   });
   // B2:C2의 병합된 셀에 수직 가운데 정렬을 설정합니다.
   sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
}

데이터 바인딩

간단하면서도 효율적으로 데이터를 바인딩하는 방법을 살펴봅니다.

단계

getSheet 메서드를 사용하여 작업 중인 시트를 가져옵니다. "new GC.Spread.Sheets.Bindings.CellBindingSource(person);"를 사용하여 셀 바인딩 원본을 설정합니다. 그런 다음 setBindingPath 메서드를 사용하여 지정된 시트 영역에서 지정된 셀의 바인딩 경로를 설정합니다. 그런 다음, setDataSource 메서드를 사용하여 시트의 데이터 소스를 설정합니다.

initSpread: function (spread) {
   var sheet = spread.getSheet(0);
   var person = { name: 'Peter Winston', age: 25, gender: 'Male', address: { postcode: '10001' } };
   var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
   sheet.setBindingPath(2, 2, 'name');
   sheet.setBindingPath(3, 2, 'age');
   sheet.setBindingPath(4, 2, 'gender');
   sheet.setBindingPath(5, 2, 'address.postcode');
   sheet.setDataSource(source);
}