Next.js 개발자를 위한 글로벌 No.1 Excel 컴포넌트

1. Next.js 앱 폴더로 이동 후, SpreadJS 라이브러리를 설치합니다.

npm install @mescius/spread-sheets-react

2. SpreadJS 스타일 적용을 위한 css 파일을 추가합니다.

작업을 진행할 Next.js 앱 global.css 파일에 접근하여, SpreadJS css 파일을 추가합니다.

여러가지 css 파일 중 원하는 스타일의 css 파일을 추가합니다. (전체 테마 확인하기)

// app/global.css

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

3. SpreadSheet.jsx 라는 파일을 생성합니다.

애플리케이션의 루트 폴더에 있는 components 폴더에 SpreadSheet.jsx 파일을 생성합니다.

* components 폴더가 없다면 components 폴더를 생성합니다.

4. SpreadJS는 서버 사이드 렌더링(SSR)을 지원하지 않으므로, 컴포넌트가 클라이언트 측에서만 렌더링 되도록 설정합니다.

components/SpreadSheet.jsx 파일에 아래와 같이 지시어를 추가합니다.

'use client';

5. SpreadJS 모듈을 추가합니다.

components/SpreadSheet.jsx 파일에 아래와 같이 SpreadJS 모듈을 추가합니다.

import { SpreadSheets } from '@mescius/spread-sheets-react';

import * as GC from '@mescius/spread-sheets';

6. 한국 문화권을 설정해 줍니다.

1) 한국어 리소스 패키지를 설치합니다.

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

2) components/SpreadSheet.jsx 파일에 한국어 리소스 패키지를 가져오는 코드를 추가합니다.

// components/SpreadSheet.tsx

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

3) 아래의 코드를 추가합니다.

// components/SpreadSheet.tsx

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

7. SpreadJS 컨트롤을 초기화하고, 화면에 추가합니다.

SpreadJS 컨트롤을 초기화하고, 화면에 SpreadJS 컨트롤을 표시할 수 있도록 코드를 작성합니다.

아래 샘플에서 상세한 코드를 확인해 주세요.

8. Next.js 앱을 실행하여 결과를 확인합니다.

npm run dev

Next.js 앱을 실행하면 아래와 같이 스프레드시트가 추가된 것을 확인하실 수 있습니다.