가하
50
2021-11-22 12:37:30 작성 2021-11-22 12:38:18 수정됨
2
133

react 에서 component가 props 보다 먼저 처리 될 경우 어떤식으로 해결해야할까요


import {
ColumnApi,
GridApi,
GridOptions,
GridReadyEvent,
IDatasource,
IGetRowsParams,
ModuleRegistry,
} from '@ag-grid-community/core'
import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model'
import { AgGridColumn, AgGridReact } from '@ag-grid-community/react'
import React, { useCallback, useMemo, useState, useEffect } from 'react'
import {TerminalRowData, getTerminal} from "../../api/terminal/getTerminal";

ModuleRegistry.registerModules([InfiniteRowModelModule])


interface TerminalTableProps {
rowData?: TerminalRowData[]
}

function TerminalTable(props: TerminalTableProps) {
const [gridApi, setGridApi] = useState<GridApi>()
const [gridColumnApi, setGridColumnApi] = useState<ColumnApi>()
let test = JSON.stringify(props.rowData) // props test

function onGridReady(event: GridReadyEvent){
setGridApi(event.api)
setGridColumnApi(event.columnApi)

const updateData = (data:any) => {
const dataSource: IDatasource = {
getRows: (params: IGetRowsParams) => {
setTimeout(function () {
if(data){
const rowsThisPage = data?.slice(params.startRow, params.endRow)
let lastRow = -1
if (data?.length <= params.endRow) {
lastRow = data.length
}
params.successCallback(rowsThisPage, lastRow)
}
}, 500)
},
}
event.api.setDatasource(dataSource)
}
////////////////////////////////////////////////////////////////////////////////////

const data = [{"time":"2142","age":"353","num":"731"},
{"time":"3535","age":"312","num":"245"},
{"time":"3443","age":"773","num":"935"}]

updateData(data) // table표현, data표현 잘 됨
//updateData(props.rowData) // table만 표현되고(column name까지) data값이 안 들어감

////////////////////////////////////////////////////////////////////////////////////

}

const loadingRenderer = useCallback((params) => {
if (params.value !== undefined) {
return params.value
} else {
return '<img src="https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/images/loading.gif">'
}
}, [])

const gridOptions = useMemo<GridOptions>(
() => ({
cacheBlockSize: 20,
components: { loadingRenderer },
defaultColDef: {
resizable: true,
},
infiniteInitialRowCount: 1,
onGridReady,
paginationPageSize: 100,
rowBuffer: 0,
rowModelType: 'infinite',
}),
[]
)

return (
<>
{test}

<div className="ag-theme-alpine" style={{ height: 400, width: 620 }}>
<AgGridReact gridOptions={gridOptions} modules={[InfiniteRowModelModule]}>

<AgGridColumn field="time" width={150}></AgGridColumn>
<AgGridColumn field="age" width={150}></AgGridColumn>
<AgGridColumn field="num" width={150}></AgGridColumn>

</AgGridReact>
</div>
</>
)
}

export default TerminalTable


안녕하세요 고수분들

infinite 스크롤을 사용하려고 ag-grid 사용해서 테이블을 구현하려 하고 있습니다

코드 안에서 data 값을 정해주면 문제없이 잘 돌아가는데

props 값을 받아와서 테이블의 data 값으로 넣어주면 빈 테이블만 뜨고 data 값이 안뜨네요

그래서 props를 받아오기 전에 테이블이 먼저 처리돼서 그런걸까? 추측하고 있습니다


이상한 것은 그렇게 data 값 없는 빈 테이블을 띄어놓은 상태에서

테이블의 부모컴포넌트에서 테이블 위치를 이동한 다음 컴파일하면

테이블의 위치가 바뀐 상태로 data값이 잘 들어가서 표현됩니다

하지만 다시 f5를 누르면 빈 테이블만 나오고요

혹시 이런 경우 어떤식으로 해결하면 좋을 지 조언 부탁드립니다 ㅠㅠ





0
  • 답변 2

  • 페코옹
    1k
    2021-11-22 13:12:30 작성 2021-11-22 13:12:43 수정됨

    지금 보면 props에서 rowData를 조건부로 가져오게 되어 있죠?


    onReady에서 업데이트 로직 빼시고 아래 처럼 해보세요.


    React.useEffect(() => {

       if(gridApi && props.rowData) {

       데이터 업데이트 로직

      }   

    },[gridApi, props.rowData])



  • 가하
    50
    2021-11-22 13:50:47

    와.. 바로 해결 됐습니다

    너무 감사드립니다 페코옹님

    되니까 기분이 너무 좋네요

    정말 감사드려요

  • 로그인을 하시면 답변을 등록할 수 있습니다.