ag-grid field 이름에 점(.)이 들어간 경우, valueFormatter의 params.value가 undefined가 되는 현상

배경

회사에서 ag-grid로 데이터표를 만드는 작업을 하고 있었다. 그런데 분명히 db에도 값이 있고, column과 rowdata가 제대로 매핑되고 있고, api 응답을 제대로 받고 있음에도 불구하고 화면에 값이 표시되지 않는 현상을 겪었다.

 

분석

db에 값이 제대로 저장되어 있는 모습

api 응답도 제대로 받고 있는 모습 + row data와 column 간의 매핑도 제대로 되고 있다.

그러나 값이 제대로 출력되지 않는 현상

ag-grid를 사용함에 있어서 data의 값을 정제하기 위해 valueFormatter 코드를 썼었는데, 여기서 params를 콘솔로 찍어보니 params.value의 값이 undefined가 되는 것을 확인할 수 있었다.

params.value가 간헐적으로 undefined인 모습

valueFormatter: (params) => {
    if (params.value === null || params.value === undefined) return params.value;
    return FormatStringPoint(params.value, ~~~~~);
}

분석 결과, value 값이 undefined가 되는 컬럼은 한가지 특징이 있었는데, 그것은 바로 컬럼의 field에 점(.)이 있었다는 것이다.

해당 내용과 관련해서 깃허브와 ag-grid 공식문서, 스택오버플로우를 찾아본 결과,

"field에 점(.)이 있다면, 이를 javascript 문법인 dot notation( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors )으로 인지되어 객체 속성 탐색을 한다."라는 내용을 확인할 수 있었다.

이를 방지하기 위해 ag-grid의 gridOptions에서 suppressFieldDotNotation라는 옵션을 제공하는데, 이 옵션은 default 값이 false이고, 이를 true로 지정해 줄 경우, field에 점이 있어도 dot notation 실행을 막아준다.

참고 링크: https://stackoverflow.com/questions/58772051/can-i-use-a-field-name-which-contains-a-period-in-my-data-source-for-ag-gr

Can I use a field name which contains a period (".") in my data source for ag-grid?

 

결과

따라서 suppressFieldDotNotation 옵션을 true로 설정하고 결과를 확인해보니 데이터 표도 제대로 나오고, valueFormatter의 params.value도 제대로 출력된는 것을 확인할 수 있었다.

params.value(왼쪽)가 더이상 undefined가 아닌 제대로 된 값으로 출력되는 모습

데이터가 제대로 출력되는 모습