# React에서 SpreadJS 시작하기

## Content

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

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

## Vite로 프로젝트 설정

### 1\. Vite React 프로젝트 생성

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

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

### 2\. SpreadJS React 모듈 설치

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

## 기본 설정

### 1\. SpreadJS CSS 가져오기

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

```javascript
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 라이선스 키를 입력할 수 있습니다. 예를 들어, 아래 샘플 코드를 사용할 수 있습니다:

```bash
npm run dev
```

### 3\. 프로젝트 실행

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.e0fecb.png?width=650)
SpreadSheets, Worksheet, Column은 태그 계층 구조의 기본 요소입니다. 다른 요소는 설정을 통해 작동합니다. 주요 태그 계층 구조는 다음과 같습니다:

```xml
<SpreadSheets>
  <Worksheet>
    <Column></Column>
    ...
  </Worksheet>
  ...
</SpreadSheets>
```

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

1. [SpreadSheets 요소](/spreadjs/docs/v18/javascript_frameworks/UsingSpread.SheetswithReact/UsingtheSpreadSheetsElement)
2. [Worksheet 요소](/spreadjs/docs/v18/javascript_frameworks/UsingSpread.SheetswithReact/UsingtheWorksheetElement)
3. [Column 요소](/spreadjs/docs/v18/javascript_frameworks/UsingSpread.SheetswithReact/UsingtheColumnElement)
4. [Chart 요소](/spreadjs/docs/v18/javascript_frameworks/UsingSpread.SheetswithReact/UsingtheChartElement)
5. [Spread-sheets-io 요소](/spreadjs/docs/v18/javascript_frameworks/UsingSpread.SheetswithReact/UsingtheExcelIOElement)
6. [Shape 요소](/spreadjs/docs/v18/javascript_frameworks/UsingSpread.SheetswithReact/UsingtheShapeElement)