7.2 React에서 사용하기
React JavaScript와 TypeScript 예제입니다. 제품 파일 준비는 공통 안내를 먼저 확인하십시오.
아래 예제를 src/samples/에 둘 때의 import 경로를 사용합니다.
7.2.1 JavaScript로 그리드 생성하기
래퍼는 마운트 시 그리드를 생성합니다. 부모의 useEffect에서 ref.current를 통해 접근하고 데이터를 설정합니다.
예제는 기본값인 waitPortalRendering=false를 사용합니다.
import React, { useEffect, useRef } from 'react';
import AUIGrid from '../static/AUIGrid-React.js/AUIGridReact';
// 칼럼과 생성 속성을 컴포넌트 밖에 두어 매 렌더링마다 만들지 않습니다.
const columns = [
{ dataField: 'name', headerText: '품목', width: 200 },
{ dataField: 'quantity', headerText: '수량', dataType: 'numeric' }
];
const props = { width: '100%', height: 360, editable: true };
export default function GridExample() {
const gridRef = useRef(null);
useEffect(() => {
const grid = gridRef.current;
if (!grid || !grid.isCreated()) return;
// React 래퍼의 엔진 이벤트는 bind로 등록합니다.
grid.bind('cellClick', (event) => console.log(event.value));
grid.setGridData([
{ name: '모니터', quantity: 12 },
{ name: '키보드', quantity: 30 }
]);
return () => {
// 그리드 자체의 파괴는 래퍼가 처리합니다.
if (grid.isCreated()) grid.unbind('cellClick');
};
}, []);
return <AUIGrid ref={gridRef} columnLayout={columns} gridProps={props} />;
}7.2.2 TypeScript로 그리드 생성하기
TypeScript 프로젝트는 AUIGridReact.tsx를 사용합니다.
IGrid.Props와 IGrid.Column은 엔진의 설정 타입이고, useRef<AUIGrid>는 래퍼 인스턴스의 타입입니다.
import React, { useEffect, useRef } from 'react';
import * as IGrid from 'aui-grid';
import AUIGrid from '../static/AUIGrid-React.tsx/AUIGridReact';
const columns: IGrid.Column[] = [
{ dataField: 'name', headerText: '품목', width: 200 },
{ dataField: 'quantity', headerText: '수량', dataType: 'numeric' }
];
const props: IGrid.Props = { width: '100%', height: 360, editable: true };
export default function GridExample() {
const gridRef = useRef<AUIGrid>(null);
useEffect(() => {
const grid = gridRef.current;
if (!grid || !grid.isCreated()) return;
// enum과 이벤트 타입으로 이름과 전달 값을 확인할 수 있습니다.
grid.bind(IGrid.EventKind.CellClick, (event: IGrid.CellClickEvent) => {
console.log(event.value);
});
grid.setGridData([
{ name: '모니터', quantity: 12 },
{ name: '키보드', quantity: 30 }
]);
return () => {
if (grid.isCreated()) grid.unbind(IGrid.EventKind.CellClick);
};
}, []);
return <AUIGrid ref={gridRef} columnLayout={columns} gridProps={props} />;
}이벤트 값의 타입은 IGrid.CellClickEvent처럼 지정합니다.
IGrid.EventKind.CellClick은 이벤트 이름을 나타내는 enum 값입니다.
7.2.3 메서드 호출과 이벤트 연결
래퍼 메서드는 대상 그리드 ID를 내부에서 전달합니다. 엔진 API의 첫 번째 그리드 ID 인자를 제외하고 호출하십시오.
// 전역 엔진 API는 ID가 필요하지만 래퍼는 ref 인스턴스에 호출합니다.
gridRef.current?.addRow({ name: '마우스', quantity: 5 }, 'last');
gridRef.current?.setGridData(rows);
gridRef.current?.resize();엔진의 셀 이벤트는 onCellClick JSX 속성 대신 bind('cellClick', handler)로 등록합니다.
반환값으로 편집 등을 제어하는 이벤트도 bind()의 콜백에서 반환합니다.
// 이 예에서는 품목 이름의 편집 시작을 막습니다.
grid.bind('cellEditBegin', (event) => {
if (event.dataField === 'name') return false;
return true;
});반환값의 의미는 각 이벤트의 API 설명을 따릅니다.
동일 이벤트를 반복 등록하지 않도록 effect의 의존성과 unbind() 시점을 관리하십시오.
unbind('cellClick')은 지정 이벤트의 연결을 해제하므로 여러 곳에서 같은 이벤트를 소유하지 않는 구조가 좋습니다.
7.2.4 생성, 비동기 데이터와 해제
- 컴포넌트를 배치하면 자동 생성됩니다. 최초 마운트에서 다시
create()를 호출하지 않습니다. - 최종 언마운트 시 래퍼가 그리드와 크기 감지 작업을 정리합니다. 부모가 같은 그리드를 중복 파괴할 필요는 없습니다.
- 서버 데이터 요청은 effect 해제 시 취소하거나 응답을 무시하십시오. 그리드가 제거된 뒤 도착한 응답에서
setGridData()를 호출하지 않습니다. columnLayout,gridProps,footerLayout은 생성 시 전달하는 값입니다. 객체나 React state를 바꾼 것만으로 엔진 설정이 자동 갱신되는 것은 아닙니다. 데이터는setGridData(), 칼럼은changeColumnLayout(), 지원하는 실행 중 속성은setProp()을 사용합니다.- Portal에서
waitPortalRendering=true를 사용하면 생성이 다음 애니메이션 프레임으로 미뤄집니다. 이 경우 위 예제의 effect 실행 시점에는 아직 그리드가 없을 수 있으므로 DOM 부착 및isCreated()확인 후 초기 데이터를 설정해야 합니다.
부모 레이아웃 변화까지 감지하려면 래퍼 1.7의 resizeMode="container"를 사용합니다.
서버 렌더링 환경에서는 엔진과 래퍼의 로딩 및 생성을 클라이언트 영역에서 수행하십시오. name 지정만으로 서버에서 엔진을 실행할 수 있는 것은 아닙니다.