[AG-Grid] gridOptions 공통사용 가능하게 커스텀 하는 방법

원래 코드로 아래와 같이 작성하고 AG-Grid에서 사용할때 가져와서 사용을 했었다

export const gridOptions: GridOptions = {
  // Column에 넣어야할 설정들은 setState로 넣어야함 => 아래에 있는것들은 반영안됨
  columnDefs: [
    { headerCheckboxSelection: true, checkboxSelection: true },
    // 날짜 필터 설정하는거 (https://www.ag-grid.com/javascript-data-grid/filter-date/)
    {
      field: 'date',
      filter: 'agDateColumnFilter',
      filterParams: {
        // ToDo : 날짜 필터 추가 매개 변수 전달해야함
      }
    },
    { field: 'artist', checkboxSelection: true },
    { field: 'id', checkboxSelection: true }
  ],

  // 엑셀 다운로드 관련 옵션
  defaultExcelExportParams: {
    exportAsExcelTable: {
      name: 'Test export',
      showRowStripes: false,
      showColumnStripes: true,
      showFilterButton: true
    }
  },
 
  //** 지우면 안되는 옵션들 (테스트 한것들) **/
  // cell 너비에 맞춰서 columns사이즈 (필요함!!!!)
  autoSizeStrategy: {
    type: 'fitCellContents'
  },
  pagination: true, // 페이징 여부
  paginationPageSize: 20, // 한페이지 내에서 몇개보여줄것인지
  suppressHorizontalScroll: true, // 수평 스크롤 억제
  //enableFillHandle 활성화하고 enableRangeSelection을 활성화하는 경우 enableFillHandle이 우선합니다.
  // 드래깅 후 복사 붙여넣기하는 기능
  enableRangeSelection: true,
  enableFillHandle: true
};

이렇게 하면 좋은점은 다 같은 형식의 옵션들을 사용할수 있어서 편한점이 있지만

단점으로는 각자 필요한 옵션이 있고 불필요한 옵션이 있음에도 다 공통으로 들어간다는 점에 그리드 옵션을 표마다 만들어야 하는 단점이 있다

이를 보완하기 위해 인자를 받아서 true인값들만 옵션에 추가하는 함수로 변형하여 적용하였다

 

아래의 코드로 변신! createGridOptions를 확인하면  option으로 인자를 받아서 사용하도록 변경했다

import { GridOptions } from 'ag-grid-community';

// 여기서 편집기능, 필터기능, 리사이징, 소팅기능 관리할수있음
export const defaultColDef = {
  flex: 1,
  filter: true,
  resizable: true,
  sortable: true,
  editable: true
};

//defaultGridOptions으로 페이지 처리를 삽입
export const defaultGridOptions: GridOptions = {
  //** 지우면 안되는 옵션들 (테스트 한것들) **/
  // cell 너비에 맞춰서 columns사이즈 (필요함!!!!)
  autoSizeStrategy: {
    type: 'fitCellContents'
  },
  pagination: true, // 페이징 여부
  paginationPageSize: 20, // 한페이지 내에서 몇개보여줄것인지
  suppressHorizontalScroll: true, // 수평 스크롤 억제
  //enableFillHandle 활성화하고 enableRangeSelection을 활성화하는 경우 enableFillHandle이 우선합니다.
  // 드래깅 후 복사 붙여넣기하는 기능
  enableRangeSelection: true,
  enableFillHandle: true
};

export const createGridOptions = (options: { dateFilter?: boolean; excelExport?: boolean }): GridOptions => {
  // defaultGridOptions를 복사하여 gridOptions 생성
  const gridOptions: GridOptions = { ...defaultGridOptions };

  // columnDefs가 undefined인 경우 빈 배열로 초기화
  if (!gridOptions.columnDefs) {
    gridOptions.columnDefs = [];
  }

  // dateFilter 옵션이 true인 경우 columnDefs에 date 필터 추가
  if (options.dateFilter) {
    gridOptions.columnDefs.push({
      field: 'date',
      filter: 'agDateColumnFilter',
      filterParams: {
        // 날짜 필터 추가 매개 변수 전달해야함
      }
    });
  }

  if (options.excelExport) {
    gridOptions.defaultExcelExportParams = {
      exportAsExcelTable: {
        name: 'Test export',
        showRowStripes: false,
        showColumnStripes: true,
        showFilterButton: true
      }
    };
  }

  return gridOptions;
};

// 사용 예시
const myGridOptions = createGridOptions({ dateFilter: true, excelExport: true });

이렇게 하니 코드를 다시 안만들어도되고, 재사용가능하게 코드를 짤수있게 되어서 기쁘다

단, 이 생각은 처음 코드를 짜고 불편함을 인지 한 후 리펙토링에 들어간거라... 처음부터 이생각을 하진 못했었다

개선되는 코드를 보니 뿌듯하다!!