페이지 5: Grid API 및 고급 기능 활용

5. Grid API 및 고급 기능 활용

AG Grid는 그리드의 모든 측면을 프로그래밍 방식으로 제어할 수 있는 포괄적인 Grid API를 제공합니다. 이를 통해 동적인 사용자 경험을 만들고 복잡한 요구 사항을 처리할 수 있습니다.

5.1. Grid API 접근 및 사용

onGridReady 콜백을 통해 gridApi 객체에 접근하고, 이를 사용하여 그리드 데이터를 업데이트하거나, 필터 및 정렬 상태를 변경하는 등의 작업을 수행할 수 있습니다.

import React, { useState, useCallback, useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';

const MyAdvancedGrid = () => {
  const gridRef = useRef(null);
  const [rowData, setRowData] = useState([]); // 초기 데이터

  const onGridReady = useCallback((params) => {
    gridRef.current = params.api; // gridApi 저장
    // 예를 들어, 초기 데이터 로드
    fetch('https://www.ag-grid.com/example-assets/row-data.json')
      .then(resp => resp.json())
      .then(data => setRowData(data));
  }, []);

  const clearFilters = useCallback(() => {
    gridRef.current.setFilterModel(null); // 모든 필터 초기화
  }, []);

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <button onClick={clearFilters}>필터 지우기</button>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        onGridReady={onGridReady}
      ></AgGridReact>
    </div>
  );
};

5.2. 고급 데이터 관리 및 기능

• 서버 사이드 데이터: AG Grid는 대규모 데이터 세트를 위해 서버 사이드 데이터 로딩 및 관리를 지원하는 Row Model (예: Infinite Row Model, Server-Side Row Model)을 제공합니다.
• 선택 및 컨텍스트 메뉴: rowSelection 속성을 사용하여 행 선택을 활성화하고, getContextMenuItems를 통해 커스텀 컨텍스트 메뉴를 추가할 수 있습니다.
• 셀 병합 및 그룹화: colSpan, rowSpan 및 그룹핑 기능을 사용하여 복잡한 테이블 레이아웃을 구현할 수 있습니다.
• 테마 및 스타일링: 다양한 내장 테마(ag-theme-alpine, ag-theme-balham 등)를 제공하며, CSS를 통해 커스텀 스타일을 적용할 수 있습니다.
• 불필요한 기능 비활성화: 성능이 낮은 장치에서는 특정 컬럼의 필터링이나 정렬 같은 복잡한 기능을 조건부로 비활성화하거나, gridRef.current.destroy()를 사용하여 그리드 인스턴스를 제거할 수 있습니다.

이 5단계를 모두 완료했다면, AG Grid React를 사용하여 강력하고 유연한 데이터 테이블 솔루션을 구축할 준비가 된 것입니다.