React에서 npm을 사용하여 SpreadJS 시작하기

기초가이드 React에서 npm을 사용하여 SpreadJS 시작하기

추천0

페이지 정보

작성자 MESCIUS

작성일 2021-12-07 08:00 조회 1,759회 댓글 0건

본문

첨부파일

sjs-react-app.zip (430.2K)

관련링크

https://www.youtube.com/watch?v=VJo08_kj2R4

React에서 SpreadJS를 시작하는 방법에 대해 설명합니다.

React 앱 생성하기

터미널을 열고, 원하는 폴더로 이동하여 아래와 같이 명령어를 입력해 줍니다.
```
npm init react-app sjs-react-app
```
* sjs-react-app은 애플리케이션 이름입니다. 원하는 이름으로 설정하실 수 있습니다.
"Success! Created sjs-react-app at ~ " 라는 문구가 보이고, "Happy hacking!" 이라는 문구가 보이면, 설치가 완료된 것입니다.
제대로 설치가 되었는지 확인해 보도록 하겠습니다. cd sjs-react-app 을 입력하여 위에서 만든 애플리케이션의 루트 폴더로 이동한 후, npm start를 입력하면, http://localhost:3000에서 아래와 같은 화면을 확인하실 수 있습니다.

SpreadJS npm 패키지 설치

React SpreadJS 컴포넌트는 @grapecity/spread-sheets-react npm 패키지를 통해 배포됩니다.

주요 @grapecity/spread-sheets 패키지는 핵심 기능을 제공합니다.

이 패키지들의 현재 버전을 설치하려면 애플리케이션의 루트 폴더에서 다음 명령을 실행합니다.

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

* 특정 버전의 SpreadJS npm 패키지를 설치하고자 하는 경우, npm install 패키지명@버전 으로 설치하실 수 있습니다.

예를 들어, @grapecity/spread-sheets-react v14.2.0과 @grapecity/spread-sheets v14.2.0을 설치하려면 다음의 명령을 실행해 주세요.

npm install @grapecity/spread-sheets-react@14.2.0 @grapecity/spread-sheets@14.2.0

▶ @grapecity/spread-sheets-react 버전 히스토리

▶ @grapecity/spread-sheets 버전 히스토리

SpreadJS React 컴포넌트 추가 및 초기화

위에서 만든 폴더를 확인해 보면, 아래와 같이 구성되어 있습니다.

src 폴더 내의 App.js 파일을 연 후, App.js 내부의 내용을 아래 코드로 대체합니다.

import * as React from 'react';
import * as GC from '@grapecity/spread-sheets';
import { SpreadSheets } from '@grapecity/spread-sheets-react';
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.hostStyle = {
    // 너비는 100%, 높이는 600px으로 설정합니다.
    width: '100%',
    height: '600px'
  };
}

  render() {
    return (
      <div>
        <SpreadSheets hostStyle={this.hostStyle}
         workbookInitialized={spread => this.initSpread(spread)}>
        </SpreadSheets>
      </div>
    )
  }
 
  initSpread(spread) {
  }
}

export default App;

그런 다음 다시 npm start 명령어를 통해 애플리케이션을 실행시키면, 아래와 같이 너비는 100%, 높이는 600px인 스프레드시트가 표시되는 것을 확인하실 수 있습니다.

* npm start 실행 시, 아래와 같은 에러가 발생하는 경우

Error : Ineffective mark-compacts near heap limieap out of memory

package.json의 start 스크립트를 아래와 같이 변경해 주시면, 정상적으로 작동합니다.

"start": "react-scripts --max_old_space_size=4096 start",

한국어 설정하기

npm을 사용하여 한국어 리소스 패키지를 설치합니다.
```
npm install @grapecity/spread-sheets-resources-ko
```
App.js의 상단에 한국어 리소스 패키지를 가져오는 코드를 추가합니다.
```
import '@grapecity/spread-sheets-resources-ko';
```
initSpread 함수에 아래의 코드를 입력합니다.
```
GC.Spread.Common.CultureManager.culture("ko-kr");
```

▶ SpreadJS 데모 - 지역화 및 세계화 자세히 보기

값 설정하기

setValue 메서드를 사용하여 셀의 값을 설정합니다.

아래와 같이 initSpread 함수를 작성합니다.

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

아래 화면과 같이, 코드에서 입력한 값들이 표시됩니다.

스타일 설정

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

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

// 스타일 설정
// 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);

아래와 같은 결과 화면을 확인하실 수 있습니다.

아래 링크를 통해 사용자 정의 가능한 다양한 설정에 대해 학습하실 수 있습니다.

▶ SpreadJS 데모 - 워크시트 설정 자세히 보기

데이터 바인딩

간단하면서도 효율적으로 데이터를 바인딩하는 방법에 대해 설명합니다.

해당 작업은 새로운 시트를 열어서 시작하도록 하겠습니다.

위에서 작성하던 initSpread 함수 내부에 이어서 작성합니다.

addSheet 메서드를 사용하여 새로운 시트를 추가합니다.
```
spread.addSheet(1);
```
getSheet 메서드를 사용하여 추가한 시트를 가져옵니다.
```
var sheet2 = spread.getSheet(1);
```

person이라는 데이터를 입력해 줍니다.

var person = { name: '홍길동', age: 25, gender: 'Male', address: { postcode: '10001' } };

"new GC.Spread.Sheets.Bindings.CellBindingSource(person);"를 사용하여 셀 바인딩 소스를 설정합니다.
```
var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
```

그런 다음 setBindingPath 메서드를 사용하여 지정된 시트 영역에 지정된 셀의 바인딩 경로를 설정합니다.

sheet2.setBindingPath(2, 2, 'name');
sheet2.setBindingPath(3, 2, 'age');
sheet2.setBindingPath(4, 2, 'gender');
sheet2.setBindingPath(5, 2, 'address.postcode');

setDataSource 메서드를 사용하여 시트의 데이터 소스를 설정합니다.
```
sheet2.setDataSource(source);
```

여기까지 작성한 initSpread 함수의 전체 코드는 아래와 같습니다.

initSpread(spread) {
   GC.Spread.Common.CultureManager.culture("ko-kr");
   let sheet = spread.getActiveSheet();
   
   sheet.setValue(1, 1, "값 설정하기");
   // 값 설정 - Number : B3에 "Number" 라는 텍스트를, C3에 23이라는 숫자를 삽입합니다.
   sheet.setValue(2, 1, "Number");
   sheet.setValue(2, 2, 23);
   // 값 설정 - Text : B4에 "Text" 라는 텍스트를, C4에 "GrapeCity"라는 텍스트를 삽입합니다.
   sheet.setValue(3, 1, "Text");
   sheet.setValue(3, 2, "GrapeCity");
   // 값 설정 - Text : B5에 "Datetime" 이라는 텍스트를, C5에 오늘 날짜를 삽입합니다.
   sheet.setValue(4, 1, "Datetime");
   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);

   // 데이터 바인딩
   // 새로운 시트를 추가합니다.
   spread.addSheet(1);

   // 추가한 시트를 가져옵니다.
   var sheet2 = spread.getSheet(1);

   // 데이터를 입력합니다.
   var person = { name: '홍길동', age: 25, gender: '남', address: { postcode: '10001' } };

   // 셀 바인딩 소스를 설정합니다.
   var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);

   // 지정된 시트 영역에 지정된 셀의 바인딩 경로를 설정합니다.
   sheet2.setBindingPath(2, 2, 'name');
   sheet2.setBindingPath(3, 2, 'age');
   sheet2.setBindingPath(4, 2, 'gender');
   sheet2.setBindingPath(5, 2, 'address.postcode');

   // 시트의 데이터 소스를 설정합니다.
   sheet2.setDataSource(source);
}