AgGridReact rowData No overload matches this call. Error

오류 메시지

No overload matches this call.
  Overload 1 of 2, '(props: AgGridReactProps<any> | AgReactUiProps<any> | Readonly<AgGridReactProps<any> | AgReactUiProps<any>>): AgGridReact<...>', gave the following error.
    Type '{ children: never[]; rowData: { make: string; model: string; price: number; }[]; columnDefs: { field: string; }[]; }' is not assignable to type 'IntrinsicAttributes & (IntrinsicClassAttributes<AgGridReact<any>> & Readonly<AgGridReactProps<any> | AgReactUiProps<...>>)'.
      Property 'rowData' does not exist on type 'IntrinsicAttributes & (IntrinsicClassAttributes<AgGridReact<any>> & Readonly<AgGridReactProps<any> | AgReactUiProps<...>>)'.
  Overload 2 of 2, '(props: AgGridReactProps<any> | AgReactUiProps<any>, context: any): AgGridReact<any>', gave the following error.
    Type '{ children: never[]; rowData: { make: string; model: string; price: number; }[]; columnDefs: { field: string; }[]; }' is not assignable to type 'IntrinsicAttributes & (IntrinsicClassAttributes<AgGridReact<any>> & Readonly<AgGridReactProps<any> | AgReactUiProps<...>>)'.
      Property 'rowData' does not exist on type 'IntrinsicAttributes & (IntrinsicClassAttributes<AgGridReact<any>> & Readonly<AgGridReactProps<any> | AgReactUiProps<...>>)'.

코드 

import { AgGridReact } from 'ag-grid-react';

const AgGrid01Page = () => {
    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 AgGrid01Page;

오류 부분

        <div className="ag-theme-alpine" style={{height: 400, width: 600}}>

            <AgGridReact

                rowData={rowData}

                columnDefs={columnDefs}>

            </AgGridReact>

        </div>

 

 

해결방법

Ag-Grid Community 버전 설치

전체

npm install @ag-grid-community/all-modules

 

 

개별 설치

npm i @ag-grid-community/client-side-row-model
npm i @ag-grid-community/core
npm i @ag-grid-community/infinite-row-model
npm i @ag-grid-community/react