가이드
React 개발 가이드

React 개발 가이드

realpivot-react로 React 앱에 RealPivot2를 적용하는 방법을 안내합니다.

React에서는 Wrapper 패키지 realpivot-react를 사용합니다.
tableOptions, cubes, config 속성을 props로 전달하면, Wrapper가 DataSet 로드와 Control 생성을 자동으로 처리합니다.
런타임 API 호출이 필요한 경우 ref를 통해 컨트롤 인스턴스에 접근합니다.

설치

npm i realpivot2 realpivot-react

스타일도 함께 로드합니다.

import 'realpivot2/style.css';

사용 예시

import React, { useRef } from 'react';
import * as RealPivot from 'realpivot2';
import {
  RealPivotReact,
  type PivotBookConfiguration,
  type PivotCubeOptions,
  type RealPivotRef,
} from 'realpivot-react';
import 'realpivot2/style.css';
 
const tableOptions = [
  {
    name: 'sales',
    source: [
      { 국가: '한국', 차종: '승용', 판매수량: 12 },
      { 국가: '한국', 차종: 'SUV', 판매수량: 8 },
      { 국가: '미국', 차종: '승용', 판매수량: 15 },
      { 국가: '미국', 차종: 'SUV', 판매수량: 10 },
    ],
    table: {
      fields: [
        { name: '국가', type: 'text' },
        { name: '차종', type: 'text' },
        { name: '판매수량', type: 'number' },
      ],
    },
  },
];
 
const cubes: PivotCubeOptions[] = [
  {
    name: 'sales',
    table: 'sales',
    schema: {
      dimensions: [
        { name: '국가', type: 'str' },
        { name: '차종', type: 'str' },
      ],
      measures: [{ name: '판매수량', type: 'f64', aggregate: 'sum' }],
    },
  },
];
 
const config: PivotBookConfiguration = {
  general: { title: '첫 번째 RealPivot2' },
  tables: {
    name: 'sales',
    cube: 'sales',
    fields: {
      rows: ['국가'],
      columns: ['차종'],
      values: ['판매수량'],
    },
  },
};
 
export default function App() {
  const pivotRef = useRef<RealPivotRef>(null);
 
  return (
    <RealPivotReact
      ref={pivotRef}
      realpivot={RealPivot}
      tableOptions={tableOptions}
      cubes={cubes}
      modules={{}}
      config={config}
      licenseKey="......라이선스정보....."
      w="100%"
      h="480px"
    />
  );
}

탐색기의 Chart·Map 기능을 사용하려면 RealChart·RealMap을 설치한 후 modules 속성에 전달하면 됩니다.

import * as RealChart from 'realchart';
import * as RealMap from 'realmap';
import 'realchart/realchart-style.css';
import 'realmap/realmap-style.css';
 
// ...
modules={{ RealChart, RealMap }}

RealPivotReact

RealPivotReact 컴포넌트는 tableOptions와 cubes를 바탕으로 DataSet 및 CubeManager를 생성하며, createControl로 피벗을 생성합니다.
ref를 통해 control과 cubeManager 인스턴스에 접근할 수 있습니다.

생성 흐름은 바닐라 JS와 같습니다. 개념은 시작하기·개발 가이드를 참고하세요.

Props

PropType설명
realpivotRealPivotModuleApi주입할 realpivot2 모듈 (import * as RealPivot from 'realpivot2')
tableOptionsPivotDataTableOptions[]DataSet 테이블 옵션 (source / sourceUrl 등)
cubesPivotCubeOptions[]Cube 스키마 목록
modulesRecord<string, unknown>useAll로 등록할 외부 모듈 (예: RealChart, RealMap). 없으면 {}
configPivotBookConfiguration북·테이블 필드 배치 등 피벗 설정
licenseKeystringRealPivot2 라이선스 키. Control 생성 전에 등록됩니다
idstring컨테이너 DOM id (기본값: "realpivot2")
wCSSProperties['width']가로 크기 (기본값: 100%)
hCSSProperties['height']세로 크기 (기본값: 100%)
...divPropsHTMLAttributes<HTMLDivElement>기타 div 속성 (style 등)

RealPivotRef

ref로 피벗 컨트롤과 CubeManager에 접근합니다. 인스턴스는 마운트·데이터 로드 이후에 채워지며, 그전에는 null입니다.

export interface RealPivotRef {
  control: PivotControl | null;
  cubeManager: PivotCubeManager | null;
}

사용 예시

const control = pivotRef.current?.control;
const field = control?.table?.fields.getValueField('판매수량');
field?.updateOption('aggregate', 'avg');

See Also

시작하기Vue 개발 가이드