페이지 1: 기본 설치 및 설정

1. 기본 설치 및 설정

AG Grid는 React 애플리케이션에서 복잡한 데이터 테이블을 효율적으로 처리할 수 있게 해주는 강력한 데이터 그리드입니다. 시작하려면 먼저 AG Grid React 컴포넌트와 필요한 스타일을 설치합니다.

1.1. AG Grid React 설치

npm 또는 yarn을 사용하여 프로젝트에 AG Grid React 모듈과 스타일을 추가합니다.

npm install ag-grid-community ag-grid-react
# 또는
yarn add ag-grid-community ag-grid-react

1.2. 기본적인 그리드 컴포넌트 설정

React 컴포넌트 내에서 AgGridReact를 임포트하고 사용합니다. rowData와 columnDefs는 그리드 데이터를 표시하는 데 필수적입니다.

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

import 'ag-grid-community/styles/ag-grid.css'; // 필수 그리드 스타일
import 'ag-grid-community/styles/ag-theme-alpine.css'; // 테마 스타일

const MyGridComponent = () => {
  const [rowData] = useState([
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxster", price: 72000 }
  ]);

  const [columnDefs] = useState([
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ]);

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact rowData={rowData} columnDefs={columnDefs}></AgGridReact>
    </div>
  );
};

export default MyGridComponent;

주요 개념: AgGridReact 컴포넌트는 React에서 AG Grid를 렌더링합니다. rowData는 표시할 데이터를 배열 형태로, columnDefs는 각 컬럼의 정의를 배열 형태로 받습니다.