[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

React에서 SpreadJS 시작하기

SpreadJS는 React를 지원합니다. React는 MVC 프레임워크의 뷰(View) 계층을 처리하여 웹 애플리케이션과 모바일 애플리케이션의 사용자 인터페이스를 구축할 수 있게 해주는 JavaScript 라이브러리입니다.

React를 사용하면 페이지를 다시 로드하지 않고도 데이터를 수정할 수 있으며, 재사용 가능한 컴포넌트와 대규모 애플리케이션을 쉽게 만들 수 있습니다.

참고: SpreadJS는 React 버전 16, 17, 18을 지원합니다.

  1. Node 패키지 관리자 사용하기

  2. 전통적인 HTML 사용하기

Node 패키지 관리자(NPM) 사용하기

이 방법은 다음 단계를 포함합니다:

  1. React 프로젝트 생성하기

    명령 프롬프트 창을 열고 다음 명령어를 입력하세요:

    npm install -g create-react-app
create-react-app quick-start
cd quick-start
npm start

    작업이 완료되면, React 프로젝트가 지정한 위치에 생성됩니다. React 프로젝트 생성 방법에 대한 자세한 정보는 Create New React App을 참조하세요.

  2. 프로젝트에 SpreadJS React 모듈 설치하기

    다음 명령어를 사용하여 프로젝트에 SpreadJS React 모듈을 설치하세요:

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

  3. SpreadJS CSS 임포트하기

    다음 코드를 사용하여 index.js 파일에 SpreadJS CSS를 임포트하세요:

    import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

  4. React 애플리케이션에서 SpreadJS 사용하기 및 SpreadJS 라이센스 적용하기

    필요에 맞게 App.js 파일을 수정하세요. 변경 사항은 브라우저 창을 새로 고침하면 반영됩니다. 컴포넌트를 초기화하기 전에 유효한 SpreadJS 라이센스 키를 입력할 수 있습니다. 예시로 아래의 샘플 코드를 사용할 수 있습니다:

    import React, { Component } from 'react';
import { SpreadSheets, Worksheet, Column } from '@mescius/spread-sheets-react';
import * as GC from "@mescius/spread-sheets";

// SpreadJS 라이선싱
var SpreadJSKey = "xxx";          // 유효한 라이센스 키를 입력하세요.
GC.Spread.Sheets.LicenseKey = SpreadJSKey;

class APP extends Component {
 constructor(props) {
  super(props);
  this.spreadBackColor = 'aliceblue';
  this.sheetName = 'Goods List';
  this.hostStyle =
  {
   width: '800px',
   height: '600px'
  };
  this.data = [
    {
      Name: "Apple",
      Category: "Fruit",
      Price: 1,
      "Shopping Place": "Wal-Mart",
    },
    {
      Name: "Potato",
      Category: "Fruit",
      Price: 2.01,
      "Shopping Place": "Other",
    },
    {
      Name: "Tomato",
      Category: "Vegetable",
      Price: 3.21,
      "Shopping Place": "Other",
    },
    {
      Name: "Sandwich",
      Category: "Food",
      Price: 2,
      "Shopping Place": "Wal-Mart",
    },
    {
      Name: "Hamburger",
      Category: "Food",
      Price: 2,
      "Shopping Place": "Wal-Mart",
    },
    {
      Name: "Grape",
      Category: "Fruit",
      Price: 4,
      "Shopping Place": "Sun Store",
    },
  ];
  this.columnWidth = 100;
 }
 render() {
  return (
   <div>
   <SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle}>
   <Worksheet name={this.sheetName} dataSource={this.data}>
   <Column dataField='Name' width={300}></Column>
   <Column dataField='Category' width={this.columnWidth}></Column>
   <Column dataField='Price' width={this.columnWidth}
   formatter="$#.00"></Column>
   <Column dataField='Shopping Place' width={this.columnWidth}></Column>
   </Worksheet>
   </SpreadSheets>
   </div>
  )
 }
}
export default APP

전통적인 HTML 사용하기

이 방법은 다음 단계를 포함합니다:

  1. React HTML 템플릿 다운로드하기

    다음 링크를 통해 React HTML 템플릿을 다운로드할 수 있습니다: https://reactjs.org/docs/getting-started.html

  2. HTML 템플릿에 SpreadJS와 React - SpreadJS 추가하기

    HTML 템플릿(즉, index.html 파일)에 gc.spread.sheets.all.*.*.*.min.js, gc.SpreadJS.*.*.*.css 및 gc.spread.sheets.react.*.*.*.js 파일에 대한 참조를 추가하세요.

  3. React 애플리케이션에서 SpreadJS 사용하기 및 SpreadJS 라이센스 적용하기

    이제 React 애플리케이션에서 SpreadJS를 사용할 수 있습니다. 컴포넌트를 초기화하기 전에 유효한 SpreadJS 라이센스 키를 입력할 수 있습니다. 예시로 아래의 샘플 코드를 사용할 수 있습니다:

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        <script src="./lib/gc.spread.sheets.all.*.*.*.min.js"></script>
        <link rel="stylesheet" type="text/css" href="./lib/gc.spread.sheets.excel2013white.*.*.*.min.css">
        <script src="./lib/gc.spread.sheets.react.*.*.*.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">
        window.onload = function () {

        // SpreadJS 라이선싱
        GC.Spread.Sheets.LicenseKey = "xxx";       // 유효한 라이센스 키를 입력하세요.

            const {SpreadSheets, Worksheet, Column} = window.SpreadSheetsComponents;
            class App extends React.Component{
                 render(){
                   return (
                        <div style={{width: '800px',height: '600px'}}>
                            <SpreadSheets>
                                <Worksheet name='first'>
                                    <Column dataField="Name"/>
                                </Worksheet>
                            </SpreadSheets>
                        </div>
                    )
                }
            }
            ReactDOM.render(
                <App/>,
                document.getElementById('root')
            );
         }
        </script>
    </body>
</html>

    SpreadSheets, Worksheet, Column은 태그 계층의 기본 요소입니다. 다른 요소들은 이를 설정하여 작동합니다. 주요 태그 계층은 다음과 같습니다:

    <SpreadSheets>
  <Worksheet>
    <Column></Column>
    ...
  </Worksheet>
  ...
</SpreadSheets>

    다음 주제는 요소 지시자(element directives)를 나열합니다.

참고: React에서 SpreadJS의 ExcelIO 요소를 사용하려면 Excel IO 모듈을 임포트하고 동일한 라이센스 키를 사용하여 별도로 라이센스를 적용해야 합니다. 자세한 내용은 Excel IO 요소를 참조하세요.