[React] ag-grid에서 columnDef의 useMemo와 valueFormatter

 

0. 첫 렌더링. 코드북 조회.

/** 코드 초기값 조회 */
    useEffect(() => {
        getCodeList(); // 코드북 조회
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

 

 

1. 코드북에서 상태에 대한 코드를 가져와서 setJobStausCd 해준다.

const [jobStatusCd, setJobStatusCd] = useState<Array<any>>([]);

 

 

2. 이 화면은 자동조회가 되어서, 코드북 조회 후에는 메인 데이터를 가져온다. 

그 데이터는 dsRowData에 넣어준다.

const [dsRowData, setDsRowData] = useState<Array<any>>([]);

 

 

3. 해당 데이터에서 상태id 칼럼이 있는데, id가 아니라 name을 보여주고 싶어서,

1번에서 set한 데이터를 사용해준다. (valueFormatter 사용)

const valueFormatter = (params: any) => {
        return `${jobStatusCd?.find((element: any) => element.cdId === params.data.value)?.cdNm ?? ''} `;
    };

 

 

4. jobStatusCd를 분명 잘 set해줬음에도, valueFormatter 내부에서 로그를 찍어보면 빈값으로 나온다.

 

 

5. 컬럼 정의 부분이 useMemo로 되어있었다. 

const columnDef = useMemo(
        () => [
            { headerName: '상태', field: 'state' },
            ... 생략
        ],
        []
    );

 

https://ag-grid.com/react-data-grid/react-hooks/

If you do NOT use useState or useMemo, then the grid will be provided with a new set of Column Definitions every time the component is rendered.

 

ag-grid 공식문서에 따르면 useState나 useMemo를 사용하는 것을 권장하고 있다. 

 

 

6. valueFormatter를 dependency Array로 넣어주기

const columnDef = useMemo(
        () => [
            { headerName: '상태', field: 'state', valueFormatter },
            ... 생략
        ],
        [valueFormatter]
    );

 

이렇게 넣어주니, 값이 잘 나온다!