Next.js에서 Excel 개발하기

메시어스 서포터즈·2025년 2월 20일

Developer Solution

목록 보기

14/17

이번 포스팅에서는 React 개발자들이 많이 사용하는 Next.js 프레임워크에서 Excel 화면과 Excel 기능을 개발할 수 있는 SpreadJS JavaScript Excel UI 컨트롤을 사용하는 방법에 대해 설명합니다.

Next.js v15.1.4 기준으로 작성되었습니다.

[SpreadJS - Next.js 샘플 다운로드]

아래 Next.js 샘플 프로젝트를 다운 받아, 아래 이미지와 같이 Next.js에서 Excel을 개발 할 수 있습니다.

Next.js에서 SpreadJS 시작하기 샘플 다운로드

nextjs-excel-ui1

Next.js 앱 생성하기

터미널을 열고, 원하는 폴더로 이동하여 아래와 같이 명령어를 입력해 줍니다.
```
npx create-next-app
```
프로젝트 이름을 입력합니다. (예: nextjs-with-spreadjs)
터미널에서 구성 메시지가 나타나면 필요한 옵션을 선택하고 Enter 키를 눌러 확인하세요.
설치가 완료되면 터미널에 다음 명령을 입력하여 프로젝트를 시작합니다.

cd nextjs-with-spreadjs
npm run dev

브라우저를 사용하여 http://localhost:3000를 열 아래와 같은 화면을 확인하실 수 있습니다.

nextjs-excel-ui2

SpreadJS Next.js Excel UI - npm 패키지 설치

React SpreadJS 컴포넌트는 @mescius/spread-sheets-react npm 패키지를 통해 배포됩니다.

주요 @mescius/spread-sheets 패키지는 핵심 기능을 제공합니다.

이 패키지들의 현재 버전을 설치하려면 애플리케이션의 루트 폴더에서 다음 명령을 실행합니다.

npm install @mescius/spread-sheets-react

* 특정 버전의 SpreadJS npm 패키지를 설치하고자 하는 경우,

npm install 패키지명@버전 으로 설치하실 수 있습니다.

▶ @mescius/spread-sheets-react 버전 히스토리

▶ @mescius/spread-sheets 버전 히스토리

SpreadJS Next.js Excel 컴포넌트 추가 및 초기화

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

nextjs-excel-project

애플리케이션 루트 폴더에 components 라는 폴더가 없다면 새로 생성하고 SpreadSheet.jsx파일을 만들고 아래의 코드를 입력합니다.

   "use client";
   
   import React, { useState } 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;
   
   export default function SpreadSheet(spread) {
   
       const [hostStyle, setHostStyle] = useState({
           width: '100%',
           height: '700px'
       });
   
       let initSpread = function (spread) {
           let sheet = spread.getActiveSheet();        
       };
   
       return (
           <SpreadSheets 
               workbookInitialized={(spread) => initSpread(spread)} 
               hostStyle={hostStyle}>
           </SpreadSheets>);
   }

또한 app/page.tsx 파일의 내용을 아래 코드로 바꿉니다.


"use client";
   
   import dynamic from "next/dynamic";
   
   const SpreadSheet = dynamic(
     () => {
       return import("../components/SpreadSheet");
     },
     { ssr: false }
   );
   
   export default function Home() {
     return (
       <div>
         <h1>
         Next.JS + Spreadsheets demo
         </h1>
         <SpreadSheet />
       </div>
     )
   }

globals.css 파일에 아래 코드를 한 줄 추가하여 SpreadJS CSS를 애플리케이션으로 가져옵니다.
```
@import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful';
```
그런 다음 다시 npm run dev 명령어를 통해 애플리케이션을 실행시키면, 아래와 같이 너비는 100%, 높이는 700px인 스프레드시트가 표시되는 것을 확인하실 수 있습니다.

nextjs-excel-spreadjs

SpreadJS 한국어 언어 리소스 설정하기

npm을 사용하여 한국어 리소스 패키지를 설치합니다.
```
npm install @mescius/spread-sheets-resources-ko
```
SpreadSheet.jsx의 상단에 한국어 리소스 패키지를 가져오는 코드를 추가합니다.
```
import '@mescius/spread-sheets-resources-ko';
```
SpreadJS 라이선싱 위치 아래에 언어 설정 코드를 입력합니다.
```
GC.Spread.Common.CultureManager.culture("ko-kr");
```

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

Next.js Excel 값 설정하기 - setValue

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

아래와 같이 initSpread 함수를 작성합니다.

let initSpread = function (spread) {
    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에 "Mescius"라는 텍스트를 삽입합니다.
    sheet.setValue(3, 1, "Text");
    sheet.setValue(3, 2, "Mescius");
    // 값 설정 - Text : B5에 "Datetime" 이라는 텍스트를, C5에 오늘 날짜를 삽입합니다.
    sheet.setValue(4, 1, "Datetime");
    sheet.getCell(4, 2).value(new Date()).formatter("yyyy-mm-dd");
};

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

nextjs-spreadjs-excel

Next.js Excel 스타일 설정

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

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

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

nextjs-excel-javascript-style

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

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

Next.js Excel 데이터 바인딩

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

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

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

addSheet 메서드를 사용하여 새로운 시트를 추가합니다.
```
spread.addSheet(1);
```
getSheet 메서드를 사용하여 추가한 시트를 가져옵니다.
```
var sheet2 = spread.getSheet(1);
```

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

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

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

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

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

setDataSource 메서드를 사용하여 시트의 데이터 소스를 설정합니다.
```
sheet2.setDataSource(source);
```

여기까지 작성한 initSpread 함수의 전체 코드는 아래와 같습니다.

let initSpread = function (spread) {
    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에 "Mescius"라는 텍스트를 삽입합니다.
    sheet.setValue(3, 1, "Text");
    sheet.setValue(3, 2, "Mescius");
    // 값 설정 - 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);
};