89 lines
3.3 KiB
JavaScript
89 lines
3.3 KiB
JavaScript
'use client'
|
|
|
|
import { useCallback, useEffect, useMemo, useState } from 'react'
|
|
import { AgGridReact } from 'ag-grid-react'
|
|
|
|
import 'ag-grid-community/styles/ag-grid.css'
|
|
import 'ag-grid-community/styles/ag-theme-quartz.css'
|
|
|
|
export default function QGrid(props) {
|
|
const { gridData, gridColumns, isPageable = true } = props
|
|
const [count, setCount] = useState(0)
|
|
const [clickedCount, setClickedCount] = useState(0)
|
|
/**
|
|
* 행 데이터를 설정할 때 useState을 사용하여 렌더링 전반에 걸쳐 일관된 배열 참조를 유지하는 것이 좋습니다
|
|
*/
|
|
const [rowData, setRowData] = useState(null)
|
|
|
|
/**
|
|
* Column Definitions를 설정할 때는 useMemo 또는 useState를 사용하여 렌더 간에 일관된 참조를 유지하십시오.
|
|
* 응용 프로그램이 Column Definitions를 동적으로 변경하는 경우에도 렌더링 간에 일관된 참조를 유지하려면 useMemo 또는 useState를 사용하십시오.
|
|
*/
|
|
const [colDefs, setColDefs] = useState(
|
|
gridColumns ?? [
|
|
{ field: 'mission', filter: true },
|
|
{ field: 'company' },
|
|
{ field: 'location' },
|
|
{ field: 'date' },
|
|
{ field: 'price', valueFormatter: (params) => `₩ ${params.value.toLocaleString()}` },
|
|
{ field: 'successful' },
|
|
{ field: 'rocket' },
|
|
],
|
|
)
|
|
|
|
/**
|
|
* defaultColDef 속성을 제공할 때 이 인라인 또는 구성 요소의 단순 개체로 정의하지 마십시오. 이렇게 하면 모든 렌더링에서 새 인스턴스가 생성됩니다.
|
|
* 대신 or useState 를 사용하여 useMemo 렌더 간에 일관된 참조가 유지되도록 합니다.
|
|
*/
|
|
const defaultColDef = useMemo(() => {
|
|
filter: true
|
|
}, [])
|
|
|
|
/**
|
|
* 단순 유형(string, boolean 및 number)의 속성은 렌더링 간에 값으로 비교되므로 후크를 사용할 필요가 없습니다.
|
|
*/
|
|
const rowBuffer = 0
|
|
|
|
/**
|
|
* 모든 렌더링에서 그리드 상태를 재설정하지 않도록 useCallback을 사용하는 것이 좋습니다.
|
|
*/
|
|
const isRowSelectable = useCallback((node) => node.data.value > count, [count])
|
|
|
|
/**
|
|
* Event Listeners의 경우 이벤트 처리기가 그리드 내에서 업데이트를 트리거하지 않으므로 useCallback을 사용할 필요가 없습니다.
|
|
* 그러나 콜백과 일관성을 유지하고 항상 useCallback을 사용하는 것이 더 쉬울 수 있습니다.
|
|
*/
|
|
const onFilterOpened = useCallback(() => {
|
|
console.log(`number of clicks is ${clickedCount}`)
|
|
}, [clickedCount])
|
|
|
|
// Fetch data & update rowData state
|
|
useEffect(() => {
|
|
// async function fetchData() {
|
|
// const response = await fetch('https://www.ag-grid.com/example-assets/space-mission-data.json')
|
|
// const data = await response.json()
|
|
// setRowData(data)
|
|
// }
|
|
|
|
console.log('use effect')
|
|
gridData ? setRowData(gridData) : ''
|
|
}, [gridData])
|
|
|
|
return (
|
|
<div
|
|
className="ag-theme-quartz" // applying the Data Grid theme
|
|
style={{ height: 500 }} // the Data Grid will fill the size of the parent container
|
|
>
|
|
<AgGridReact
|
|
rowBuffer={rowBuffer}
|
|
rowData={rowData}
|
|
columnDefs={colDefs}
|
|
defaultColDef={defaultColDef}
|
|
isRowSelectable={isRowSelectable}
|
|
onFilterOpened={onFilterOpened}
|
|
pagination={isPageable}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|