[AG-grid] valueFormatter와 valueGetter의 차이

• Ag-grid를 사용하면서 개발을 했을 때 그리드에 숫자를 예를 들어, 소수점 3번째까지로 표현하고 싶다고 할 때 valueFormatter와 valueGetter 등을 활용했는데 그에 대한 차이점을 정리해보고자 한다

- valueFormatter

• UI에 출력되는 값만 변경할 때 사용된다.
• 원본 데이터는 변경 되지 않으며 단순하게 보여지는 값만 포매팅 된다.
• 예를 들면 YYYYMMDD 날짜를 YYYY-MM-DD형태로보여주나 원본 값은 YYYYMMDD 그대로이다.

const columnDefs = [
  {
    headerName: "Price",
    field: "price",
    valueFormatter: (params) => {
      return `${params.value.toFixed(2)}`; // 100 → "100.00"
    },
  }
];

- valueGetter

• 컬럼에 표시될 값 자체를 동적으로 생성한다.
• 반환된 값이 해당 컬럼의 데이터 값으로 적용된다.
• 그래서 엑셀에도 내보내기할 때 그리드 변경된 값으로 할 시 valueGetter가 좋다.

const columnDefs = [
  {
    headerName: "Full Name",
    valueGetter: (params) => {
      return `${params.data.firstName} ${params.data.lastName}`;
    },
  }
];

- valueFormatter vs valueGetter

기능	valueFormatter	valueGetter
원본 데이터 변경 여부	변경하지 않음❌	변경하지 않음❌
실행 목적	출력 형식을 변경 (UI에서만 표시 형태 수정)	새로운 값을 생성 (원본 데이터에 없는 값도 표시 가능)
실행 시점	UI에 값이 표시될 때 실행됨	데이터 로딩 시점에 실행됨
반환 값이 적용되는 곳	UI에만 적용됨 (내부 값은 유지)	UI + 내부 값으로 활용 가능