* React 설정은 아래 링크를 참고하시기 바랍니다.



loader.config 정의


loader 모듈을 가져온 뒤, loader.config 를 통해 기본 설정을 하고, 필요한 items 을 import 합니다. 

설정은 루트 컴포넌트인 App.js 에서 한 번만 호출하시면 됩니다.

plugin: 플러그인 파일들. (사용하지 않을 것이면 선언하지 않아도 됨.)

locales: 언어 파일 (기본값: ko.js)

theme: css 파일 테마 (기본값: default)

license: 라이센스



App.js


import React from 'react';
import loader from '@ibsheet/loader';
import './App.css';

loader.config({
  registry: [{
    name: 'ibsheet',
    baseUrl: '/ibsheet',
    plugins: ['common', 'dialog', 'excel']
  }]
});

const App = () => {
  const loaderVersion = loader.version;

  return (
    <div className="App">
      <p>@ibsheet/loader v{ loaderVersion }</p>
    </div>
  );
}

export default App
JavaScript




Page1.js


컴포넌트 페이지에서 마운트 시점에 IBSheet8 객체를 생성, 언마운트 시점에 IBSheet8 객체를 제거하도록 합니다. 아래는 React-Hooks 를 사용한 간단한 예제 입니다.

import React, { useEffect } from 'react';
import loader from '@ibsheet/loader';
import { SheetSampleData } from '../shared/ibsheet-data';

const Page1 = () => {
  let sheetId = '';
  const sheetEl = 'sheetContainer';
  useEffect(() => {
    const { data, options } = SheetSampleData[0]; // 시트 정보
    loader.createSheet({
      el: sheetEl,
      options,
      data
    }).then(sheet => {
      // 주의사항: 해당 구간에서 데이터 조회를 하면 안됩니다.
      sheetId = sheet.id;
      console.log('created sheet', sheetId);
    });
    return () => {
      loader.removeSheet(sheetId);
    };
  }, []);
  return (
    <div>
      <p>page1 works!</p>
      <div id={ sheetEl }></div>
    </div>
  );
}
JavaScript


참고 사항1


.then 시점에서 IBSheet8 객체가 생성되지만, 초기화가 완료된 상태가 아니기 때문에 이 시점에서 IBSheet8 객체의 함수를 통한 조회나 수정(행추가등)등의 기능을 사용하시면 안됩니다.

이와 같은 기능의 사용은 반드시 onRenderFirstFinish 이벤트에 로직을 구성하여야 합니다.



참고 사항2


ibsheet-common.js 에 있는 IB_Preset 변수의 경우, window 객체에 들어가있습니다.

React 스코프와 다르기 때문에 사용시 참고해주시기 바랍니다.



참고 사항3


loader.getIBSheetStatic() 을 사용하여 시트 전역 객체를 가져올 수 있습니다.


// 시트 Static 객체 가져오기
const IBSheet = loader.getIBSheetStatic();
// id 가 sheet 인 시트 객체를 가져오기
console.log(IBSheet["sheet"]);
JavaScript