React에서 npm을 사용하여 SpreadJS 시작하기 > 온라인 스터디

본문 바로가기

SpreadJS

온라인 스터디

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

페이지 정보

작성자 GrapeCity 작성일 21-12-07 08:00 조회 76회 댓글 0건

본문

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


React 앱 생성하기

  1. 터미널을 열고, 원하는 폴더로 이동하여 아래와 같이 명령어를 입력해 줍니다.

    npm init react-app sjs-react-app

    * sjs-react-app은 애플리케이션 이름입니다. 원하는 이름으로 설정하실 수 있습니다.

  2. "Success! Created sjs-react-app at ~ " 라는 문구가 보이고, "Happy hacking!" 이라는 문구가 보이면, 설치가 완료된 것입니다.

  3. 제대로 설치가 되었는지 확인해 보도록 하겠습니다. cd sjs-react-app 을 입력하여 위에서 만든 애플리케이션의 루트 폴더로 이동한 후, npm start를 입력하면, http://localhost:3000에서 아래와 같은 화면을 확인하실 수 있습니다.

    image-20211130140758363




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 컴포넌트 추가 및 초기화

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

image-20211130141249332

  1. 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;

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

    image-20211130171809792


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

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

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

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




한국어 설정하기

  1. npm을 사용하여 한국어 리소스 패키지를 설치합니다.

    npm install @grapecity/spread-sheets-resources-ko


  2. App.js의 상단에 한국어 리소스 패키지를 가져오는 코드를 추가합니다.

    import '@grapecity/spread-sheets-resources-ko';

  3. initSpread 함수에 아래의 코드를 입력합니다.

    GC.Spread.Common.CultureManager.culture("ko-kr");

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




값 설정하기

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

  1. 아래와 같이 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");
    }

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

    image-20211201090934985




스타일 설정

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

  1. 아래와 같이 시트의 스타일을 설정합니다. 위에서 작성하던 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);

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


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

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




데이터 바인딩

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

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

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

  1. addSheet 메서드를 사용하여 새로운 시트를 추가합니다.

    spread.addSheet(1);

  2. getSheet 메서드를 사용하여 추가한 시트를 가져옵니다.

    var sheet2 = spread.getSheet(1);

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

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

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

    var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);

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

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

  6. setDataSource 메서드를 사용하여 시트의 데이터 소스를 설정합니다.

    sheet2.setDataSource(source);

  7. 여기까지 작성한 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);
    }

  8. 애플리케이션을 실행하여 Sheet2를 클릭하면, 아래와 같은 결과 화면을 확인하실 수 있습니다.image-20211201093704837




샘플을 다운로드하여 전체 코드를 확인해 보실 수 있습니다.

아래 샘플은 node-modules 가 포함되어 있지 않으므로, npm install 후 실행시켜주시기 바랍니다.

React에서 SpreadJS 시작하기 샘플 다운로드

실행 :

npm install
npm start




지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!

spjs.png


 
  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

인기글

더보기
  • 인기 게시물이 없습니다.
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2022 GrapeCity inc.