React에서 SpreadJS 시작하기

SpreadJS는 React를 지원하여 개발자가 React 애플리케이션에서 강력한 스프레드시트 인터페이스를 구축할 수 있도록 합니다. 이 가이드는 Vite 기반 React 애플리케이션에서 함수형 컴포넌트와 훅을 사용하여 SpreadJS를 통합하는 방법을 보여주지만, 다른 React 지원 프레임워크에서도 SpreadJS를 사용할 수 있습니다.

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

Vite로 프로젝트 설정

1. Vite React 프로젝트 생성

프레임워크와 변형에서는 React + TypeScript를 선택합니다.

npm create vite@latest spreadjs-vite-app
cd spreadjs-vite-app
npm install

2. SpreadJS React 모듈 설치

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

기본 설정

1. SpreadJS CSS 가져오기

src/App.tsx 파일에서 다음 코드를 사용하여 SpreadJS CSS를 가져옵니다.

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

//유효한 라이선스 키를 입력하세요.
// GC.Spread.Sheets.LicensKey = 'YOUR_LICENSE_KEY'; 

function App() {
  let spread: GC.Spread.Sheets.Workbook;
  const [spreadBackColor, setSpreadBackColor] = useState('aliceblue');
  const [sheetName, setSheetName] = useState('My Sheet');
  const [hostStyle, setHostStyle] = useState({
    width: '800px',
    height: '600px'
  });

  const initSpread = function (spreadObj: GC.Spread.Sheets.Workbook) {
    spread = spreadObj;
    const sheet = spread.getActiveSheet();
    sheet.setValue(0, 0, "Hello SpreadJS");
  }
  return (
    <>
      <div className="sample-spreadsheets">
        <SpreadSheets backColor={spreadBackColor} hostStyle={hostStyle} workbookInitialized={spread => initSpread(spread)}>
          <Worksheet name={sheetName}></Worksheet>
        </SpreadSheets>
      </div>
    </>
  )
}

export default App

2. React 애플리케이션에서 SpreadJS 사용 및 라이선스 적용

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

npm run dev

3. 프로젝트 실행

SpreadSheets, Worksheet, Column은 태그 계층 구조의 기본 요소입니다. 다른 요소는 설정을 통해 작동합니다. 주요 태그 계층 구조는 다음과 같습니다:

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

다음 항목은 요소 지시문을 나열합니다.