오류 메시지
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 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