[React] useRef 하나로 여러 데이터 관리하기 (feat. ag-grid)

목표: 하나의 useRef 로 현재 Grid 데이터 저장하기
의도: 반복문으로 감싸진 Grid 컴포넌트에 useRef 를 각각 세팅하기가 어려워서, 하나의 useRef 를 통해 여러 Grid 데이터를 관리하고 저장할 수 있도록 하고 싶었다
기능: Grid 추가 버튼을 누르면 Grid 가 추가되고 - 사용자가 Grid 내용을 변경하면 - 변경한 값을 저장한다
방법: useRef 초기값을 null 이 아닌 [] (빈 배열) 로 세팅하여, 하나의 useRef 로 여러 Grid 데이터를 관리한다

 

 

부모 컴포넌트

const gridRef = useRef<any>([])

export const Parent = () => {
	return (
            배열.map((item, idx) => (
                <div key={idx}>
                    <ChildGrid
                        idx={idx}
                        gridRef={gridRef}
                    />
                </div>
            ))
    )
}

• gridRef 에 빈 배열을 할당한다
• <ChildGrid/> 는 반복문으로 감싸져 있는데, 현재 item 의 index 를 파악하기 위해 idx 를 props 로 전달했다

 

자식 컴포넌트

export const ChildGrid = () => {
	return (
            <Grid
                ref={(el: any) => gridRef.current[idx] = el}
                rowData={rowData}
                columnDefs={gridColumnDefList}
                sizeColumnsToFit={false}
                gridOptions={gridOptions}
                treeData={true}
                getDataPath={getDataPath}
                suppressRowClickSelection
            />
    )
}

ref={(el: any) => gridRef.current[idx] = el}

• 위 코드처럼, 빈 배열의 gridRef 값에 요소를 하나씩 할당해 주는 식으로 작성하면 된다

 

데이터 저장하기

let changedGridData: any = []
changedGridData = JSON.parse(JSON.stringify(배열))

배열.map((_item, idx) => {
    changedGridData[idx] = gridRef.current[idx].forEachNode()
})

• [참고] forEachNode() 는 Grid 데이터를 추출할 수 있는 ag-grid api 이다
• (여러개의 Grid 값을 저장하기 위해) 반복문을 돌려, 각 Grid 값을 gridRef.current[idx].forEachNode() 로 추출하여 changedGridData 에 저장한다
• changedGridData 는 Grid 를 저장하는 api 에 파라미터로 실어 보낸다