9.2 React에서 사용하기

함수 컴포넌트에서 useRef로 AUIPivot 서브 컴포넌트를 참조하고, useEffect에서 초기화합니다.

9.2.1 JavaScript 예제

파일 준비를 마친 샘플 프로젝트에서 사용할 수 있는 예제입니다. 아래 파일은 src/samples/Report.jsx에 둔다고 가정합니다. 샘플에 포함된 public/data/car_sales.json을 읽으며, 실제 배치 위치에 맞춰 경로를 바꾸십시오.

예제는 createOnMounted=false로 자동 생성을 끄고 init()에서 createPivotGrid()를 호출해 한 번 생성합니다. 행은 지점과 차종, 열은 색상, 값은 매출 합계입니다. requestData()에서 자료를 읽은 후 setGridData()로 집계합니다.

import { useEffect, useRef } from 'react';
import AUIPivot from '../static/AUIPivot-React/AUIPivotReact';

export default function Report() {
    const pivotProps = { height: 400 };
    const myPivot = useRef(null);
    // 시작점에서 피벗을 생성한 뒤 자동차 자료를 읽습니다.
    function init() {
        createPivotGrid();
        return requestData(`${import.meta.env.BASE_URL}data/car_sales.json`);
    }
    function createPivotGrid() {
        const pivot = myPivot.current;
        if (!pivot) return;
        pivot.create(pivotProps);
        pivot.setRowFields(['REGION', 'NAME']);
        pivot.setColumnFields(['COLOR']);
        pivot.setValueFields([{ dataField: 'TOTAL', operation: 'SUM' }]);
        pivot.bind('pivotComplete', event => console.log(event.type));
    }
    // 요청 도중 화면이 해제되면 결과를 사용하지 않습니다.
    function requestData(url) {
        let disposed = false;
        fetch(url).then(response => {
            if (!response.ok) throw new Error('자료 요청 실패');
            return response.json();
        }).then(data => {
            const pivot = myPivot.current;
            if (!disposed && pivot?.isCreated()) pivot.setGridData(data);
        }).catch(error => { if (!disposed) console.error(error); });
        return () => { disposed = true; };
    }
    useEffect(() => init(), []);
    return <AUIPivot ref={myPivot} createOnMounted={false}
        resizeMode="container" resizeDelayTime={100} />;
}

9.2.2 TypeScript 예제

src/samples/Report.tsx에서 TypeScript용 서브 컴포넌트를 가져옵니다. IPivot.Props는 엔진 속성을 검사하고, useRef<AUIPivot | null>은 메소드의 인수와 반환 타입을 제공합니다.

import { useEffect, useRef } from 'react';
import AUIPivot from '../static/AUIPivot-React.tsx/AUIPivotReact';
import type * as IPivot from 'aui-pivot';

export default function Report() {
    const pivotProps: IPivot.Props = { height: 400 };
    const myPivot = useRef<AUIPivot | null>(null);
    // 시작점에서 피벗을 생성한 뒤 자동차 자료를 읽습니다.
    function init() {
        createPivotGrid();
        return requestData(`${import.meta.env.BASE_URL}data/car_sales.json`);
    }
    function createPivotGrid() {
        const pivot = myPivot.current;
        if (!pivot) return;
        pivot.create(pivotProps);
        pivot.setRowFields(['REGION', 'NAME']);
        pivot.setColumnFields(['COLOR']);
        pivot.setValueFields([{ dataField: 'TOTAL', operation: 'SUM' }]);
        pivot.bind('pivotComplete', event => console.log(event.type));
    }
    // 요청 도중 화면이 해제되면 결과를 사용하지 않습니다.
    function requestData(url: string) {
        let disposed = false;
        fetch(url).then(response => {
            if (!response.ok) throw new Error('자료 요청 실패');
            return response.json();
        }).then(data => {
            const pivot = myPivot.current;
            if (!disposed && pivot?.isCreated()) pivot.setGridData(data);
        }).catch(error => { if (!disposed) console.error(error); });
        return () => { disposed = true; };
    }
    useEffect(() => init(), []);
    return <AUIPivot ref={myPivot} createOnMounted={false}
        resizeMode="container" resizeDelayTime={100} />;
}

9.2.3 메소드 호출과 이벤트

myPivot.current의 메소드는 대상 피벗 ID를 자동으로 전달합니다. 전역 API와 달리 첫 번째 인수에 ID를 넣지 않습니다. 예를 들어 myPivot.current?.setGridData(data)로 호출합니다.

이벤트는 생성 후 bind()로 등록합니다. React 컴포넌트에 onCellClick 같은 JSX 속성을 붙여 등록하지 않습니다. 문자열 이벤트 이름이나 aui-pivot의 EventKind를 사용할 수 있습니다.

import { EventKind } from 'aui-pivot';
import type { CellClickEvent } from 'aui-pivot';

// 생성된 피벗에서 클릭한 셀의 값을 확인합니다.
const pivot = myPivot.current;
const onCellClick = (event: CellClickEvent) => console.log(event.value);
pivot?.bind(EventKind.cellClick, onCellClick);
// 같은 피벗에서 이 처리기만 제거할 때 동일한 함수 참조를 전달합니다.
pivot?.unbind(EventKind.cellClick, onCellClick);

위 코드는 등록과 선택적 해제 방법을 함께 보여 줍니다. 실제 해제는 해당 기능을 종료할 때 실행하십시오. unbind(이벤트명)은 그 이벤트의 모든 처리기를 제거하므로 다른 기능이 등록한 처리기도 해제할 수 있습니다.

pivotBegin, headerClick, contextMenu처럼 반환값이 있는 이벤트는 등록한 함수에서 그 값을 직접 반환하십시오. 비동기 함수의 Promise로 취소 여부나 메뉴 목록을 반환하지 않습니다.

9.2.4 생성과 해제 시점

createOnMounted의 기본값은 true입니다. 자동 생성 시에는 pivotProps를 전달하고, 마운트 후 필드와 데이터를 설정합니다. 같은 피벗에 create()를 중복 호출하지 않습니다.
컴포넌트가 해제되면 피벗과 크기 감지 작업도 정리됩니다. 부모에서 엔진의 destroy()를 중복 호출할 필요가 없습니다.
비동기 응답이 화면 해제 후 도착할 수 있습니다. 예제처럼 요청별 정리 함수와 isCreated()로 늦은 응답을 처리하지 않도록 합니다.
생성 후 pivotProps를 바꾸는 것만으로 엔진 속성이 갱신되지는 않습니다. setProp()와 refresh() 등 해당 API를 사용합니다.

Portal 등에서 자동 생성 시점을 한 프레임 늦추려면 waitPortalRendering=true를 사용합니다. 이는 탭 표시나 애니메이션 완료를 보장하지 않습니다. 수동 생성 예제에서는 화면이 표시된 뒤 create()를 호출하고, 이미 생성된 피벗은 resize()로 크기를 다시 맞춥니다.

서버 렌더링 환경에서는 엔진과 서브 컴포넌트를 클라이언트에서만 불러오십시오. DOM이 준비된 후 생성하는 절차가 필요합니다. 크기 설정은 크기 감지와 표시 시점을 참고하십시오.

문서 홈으로 돌아가기