기초가이드 React에서 npm을 사용하여 SpreadJS 시작하기
페이지 정보
작성자 GrapeCity
본문
관련링크
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
▶
▶
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");
▶
값 설정하기
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);
아래와 같은 결과 화면을 확인하실 수 있습니다.
아래 링크를 통해 사용자 정의 가능한 다양한 설정에 대해 학습하실 수 있습니다.
▶
데이터 바인딩
간단하면서도 효율적으로 데이터를 바인딩하는 방법에 대해 설명합니다.
해당 작업은 새로운 시트를 열어서 시작하도록 하겠습니다.
위에서 작성하던 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); }
애플리케이션을 실행하여 Sheet2를 클릭하면, 아래와 같은 결과 화면을 확인하실 수 있습니다.
샘플을 다운로드하여 전체 코드를 확인해 보실 수 있습니다.
아래 샘플은 node-modules 가 포함되어 있지 않으므로, npm install 후 실행시켜주시기 바랍니다.
실행 :
npm install npm start
지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.