ag-Grid에서 특정 필드를 조건(testType 값 등)에 따라 보여주거나 숨기는 방법

import React, { useState, useMemo } 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 rowData = [
  { name: 'Alice', age: 25, score: 90 },
  { name: 'Bob', age: 30, score: 85 },
];

export const MyAgGrid = () => {
  const [testType, setTestType] = useState<'A' | 'B'>('A');

  const columnDefs = useMemo(() => {
    return [
      { headerName: 'Name', field: 'name' },
      { headerName: 'Age', field: 'age', hide: testType === 'A' },
      { headerName: 'Score', field: 'score', hide: testType === 'B' },
    ];
  }, [testType]);

  return (
    <div>
      <div style={{ marginBottom: 10 }}>
        <label>Select Test Type: </label>
        <select value={testType} onChange={(e) => setTestType(e.target.value as 'A' | 'B')}>
          <option value="A">Test A (show Score only)</option>
          <option value="B">Test B (show Age only)</option>
        </select>
      </div>

      <div className="ag-theme-alpine" style={{ height: 300 }}>
        <AgGridReact
          rowData={rowData}
          columnDefs={columnDefs}
          domLayout="autoHeight"
        />
      </div>
    </div>
  );
};