계산과 표시 분리

수량과 단가로 합계를 계산하면서 화면에는 1,200처럼 읽기 좋은 숫자를 보여 주고 싶을 때 사용합니다. 계산값과 표시 문구를 따로 관리합니다.

직접 해보기

1. 첫 주문 값 읽기

   초기 상태의 ORD-0001은 수량 10, 단가 120, 합계 1,200입니다. 합계는 별도로 입력한 값이 아닙니다.

2. 수량 편집하기

   첫 주문의 수량을 두 번 누르고 25로 바꾼 뒤 Enter를 누르세요.

3. 계산 결과 비교

   합계가 3,000으로 바뀌는지 보세요. 수량을 다시 바꾸면 같은 계산식으로 합계가 갱신됩니다.

숫자 정렬과 집계에는 실제 숫자가 필요합니다. 쉼표나 통화 기호는 계산 결과에 붙이지 말고 표시 단계에서 처리하세요.

알아두면 쉬운 용어

valueGetter

행의 값으로 새 값을 계산하는 함수입니다.

valueFormatter

계산된 값을 화면에 보여 줄 문자열로 바꾸는 함수입니다.

핵심 API 예시

등록된 Grid 요소를 grid로 참조하는 앱 코드입니다.

grid.columnDefs = [{field:'total',headerName:'합계',
  valueGetter: ({data}) => data.quantity * data.price,
  valueFormatter: ({value}) => Number(value).toLocaleString('en-US')
}];