# 계산과 표시 분리

valueGetter는 실제 계산값을 만들고 valueFormatter는 화면에 읽기 좋은 문자열을 만듭니다. 합계·정렬·비교에 숫자가 필요하면 getter는 숫자를 반환해야 합니다.

Canonical: https://grid.syidax.com/ko/docs/features/value-getter-formatter/

<a id="understand"></a>

## 동작 원리와 선택 기준

표시 문자열만 바꾸는 formatter와 실제 데이터를 바꾸는 valueParser·valueSetter를 구분하세요. 포맷된 글자를 다시 계산의 원본으로 쓰면 단위나 쉼표 때문에 결과가 달라질 수 있습니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

- [설치와 연결 · 공통 예제 데이터](https://grid.syidax.com/ko/docs/guides/getting-started.md)

<a id="example-1"></a>

## 예제 1. 수량과 단가로 합계 계산

total 필드가 원본에 없어도 계산 열을 추가할 수 있습니다.

```javascript
grid.columnDefs = [...grid.columnDefs, {
  field: 'amount', colId: 'amount', headerName: '합계', editable: false,
  valueGetter: ({ data }) => Number(data.quantity) * Number(data.price)
}];
```

결과 확인: 10 × 120은 숫자 1200입니다. 수량을 20으로 편집하면 계산 결과는 2400이 됩니다.

<a id="example-2"></a>

## 예제 2. 통화 표시 추가

실제 숫자는 유지하면서 금액을 사용자 언어에 맞게 표시합니다.

```javascript
grid.columnDefs = [{ field: 'price', headerName: '단가',
  valueFormatter: ({ value }) => new Intl.NumberFormat('ko-KR', {
    style: 'currency', currency: 'KRW'
  }).format(Number(value))
}];
```

결과 확인: 사용자는 통화 기호와 구분 기호를 보지만 원본 단가는 숫자입니다. 표시 형식이 원본 데이터의 통화를 변환하지는 않습니다.

<a id="example-3"></a>

## 예제 3. 빈 값과 0 구분

빈 단가를 0원으로 잘못 보여 주지 않도록 빈 값 표시를 따로 정합니다.

```javascript
grid.columnDefs = [{ field: 'price', headerName: '단가',
  valueFormatter: ({ value }) => value == null ? '미입력' : Number(value).toLocaleString('ko-KR')
}];
```

결과 확인: null·undefined는 미입력, 숫자 0은 0으로 표시됩니다. 유효하지 않은 숫자는 검증 단계에서 처리해야 합니다.

<a id="pitfalls"></a>

## 조합할 때와 문제를 해결할 때

getter 안에서 네트워크 요청이나 rowData 변경을 수행하지 마세요. 스크롤·정렬·재계산 중 여러 번 호출되어도 같은 입력에 같은 결과가 나와야 합니다.

사용자가 직접 수식을 입력해야 한다면 valueGetter가 아니라 수식 기능을 검토합니다. 두 방식의 결과 저장과 편집 동작은 다릅니다.

<a id="related-api"></a>

## 이 기능에 사용하는 API

- [valueGetter](https://grid.syidax.com/ko/docs/columns/valueGetter.md) — 원본 행에서 계산한 셀 값을 반환합니다. 단순 표시 문자열만 바꾸려면 valueFormatter를 사용합니다.
- [valueFormatter](https://grid.syidax.com/ko/docs/columns/valueFormatter.md) — 셀 값을 통화·날짜 등 읽기 쉬운 문자열로 표시합니다. 저장된 원본 타입은 바꾸지 않습니다.

<a id="next"></a>

## 함께 읽기

- [행·열·ID의 관계](https://grid.syidax.com/ko/docs/guides/concepts.md)
- [결과와 이벤트 연결](https://grid.syidax.com/ko/docs/guides/data-event-access.md)
- [Features에서 살펴보기](https://grid.syidax.com/grid/value-getter-formatter) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.