[React] AG Grid

https://www.ag-grid.com/

웹페이지 만들다보면 리스트 페이지를 많이 만드는 경우가 있다.
가장 기본적인 게시판부터 실제 여러 프로젝트를 접하다보면 리스트 테이블 페이지를 많이 만들게 된다.

테이블을 만들게 되면 당연 페이징,필터링, 데이터 정렬, 그룹화, 선택된 리스트 한번에 확인할 수 있게 하는 등 여러 기능이 요구되는데 이 모든 기능을 다 가진 웹 컴포넌트를 개발하려면 시간이 많이 든다. 
(엑셀에 익숙하면 웹페이지에서도 엑셀처럼 좋은 리스트 형식을 쓰고싶은건 사실.. )
이 모든 기능을 가진 것을 AG Grid 로 사용할 수 있다! 

AG Grid와 같은 그리드 라이브러리는 서버에서는 데이터를 제공하고, 클라이언트는 데이터를 가공하고 표시하는 역할 분담하는 단일 책임 원칙(SRP)을 준수하는 좋은 디자인 패턴이다. 
서버 부하 줄이고, 유지보수를 용이하게 하며, 성능을 최적화하는데 기여한다. 

AG Grid의 일부 기능은 엔터프라이즈 라이센스로 유료인 기능도 있다. 그치만 무료 기능도 좋다.

나는 이 AG Grid에서 사용하는 기능과 기술들을 하나씩, 직접 코딩하여 추가해보면서 AG Grid가 어떻게 돌아가는지 어떤식으로 코드 처리를 해야하는지 알아볼거다. 
라이브러리를 단순히 사용하는게 아니라, 라이브러리에서 제공하는 기술들을 하나씩 직접 코딩하고 구현하여 해당 기술들의 핵심 원리와 동작 방식을 배우는 과정을 올리겠다.

 

AG Grid 개념 및 주요 기능 

AG Grid

- 데이터 그리드 컴포넌트

- 대량의 데이터 셋을 관리하고 렌더링할 때 강력한 성능과 기능을 제공하는 라이브러리 

- 다양한 프레임워크에서 사용할 수 있음 (React, Angular, Vue.js, JavaScript와 같은 현대적인 웹 애플리케이션에서 많이 사용됨)

 

사용자가 데이터를 쉽게 볼 수 있도록 테이블 형식으로 렌더링해주며, 많은 데이터를 효율적으로 처리할 수 있는 다양한 기능들을 제공한다

데이터 정렬, 필터링, 페이징, 그룹화 등과 같은 기본적인 그리드 작업을 매우 쉽게 수행할 수 있게 해줌

 

AG Grid의 주요 기능

1. 정렬(Sorting)

- 각 열의 데이터를 오름차순 또는 내림차순으로 정렬

- 사용자가 직접 헤더를 클릭하여 정렬 기준을 변경할 수 있음 

 

2. 필터링(Filtering)

- 특정 조건에 맞는 데이터를 필터링할 수 있는 기능 

- 기본적인 텍스트 필터링부터, 숫자 필터, 날짜 필터까지 다양한 필터 기능을 지원함

 

3. 페이징(Paging)

- 많은 양의 데이터를 한 번에 보여주지 않고 페이지 단위로 나누어 보여줄 수 있음 

- 이를 통해 성능을 최적화하고 UI를 깔끔하게 유지할 수 있음

 

4. 셀 편집(Cell Editing)

- 테이블 셀 내에서 데이터를 직접 수정할 수 있는 기능을 제공함

- 각 셀에 입력 필드 또는 드롭다운 메뉴와 같은 UI요소를 적용할 수 있음

 

5. 그룹화(Grouping)

- 데이터를 특정 열에 따라 그룹화하여 보기 쉽게 만들 수 있음

- 그룹화된 데이터를 확장하거나 축소하여 볼 수 있음

 

6. 사용자 지정 셀 렌더링(Custom Cell Rendering)

- 각 셀의 데이터를 원하는 방식으로 렌더링 할 수 있음

- 예) 숫자를 통화 형식으로 표시하거나, 특정 조건에 따라 색상을 변경하는 등의 작업이 가능

 

7. 마스터/세부 그리드(Master/Detail Grids)

- 각 행을 클릭하면 하위 데이터를 포함하는 그리드(세부 그리드)를 표시할 수 있는 기능을 제공함

 

8. 행 선택(Row Selection)

- 각 행을 선택하거나 여러 행을 선택할 수 있으며, 선택된 행에 대해 다양한 동작을 수행할 수 있음

- 단일 선택 또는 다중 선택 모드를 사용할 수 있음

 

9. API 및 이벤트

- 그리드 상태를 조작하고 관리할 수 있는 다양한 API와 사용자 상호작용을 처리할 수 있는 이벤트를 제공함

 

 

 

간단한 사용 예시 (React)

npm install ag-grid-react ag-grid-community

 

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 App = () => {
  const [columnDefs] = useState([
    { headerName: "Make", field: "make" },
    { headerName: "Model", field: "model" },
    { headerName: "Price", field: "price" }
  ]);

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

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

export default App;

 

실행하면 아래와 같이 Ag-grid가 만들어지고 자유롭게 데이터 정렬 등 많은 기능이 사용되는것을 알 수 있다.

make, model, price 세 개의 열을 가진 간단한 테이블을 렌더링

 

 

https://www.ag-grid.com/javascript-data-grid/getting-started/

JavaScript Grid: Quick Start | AG Grid