Format Number
Format Number (숫자 포맷)
숫자를 특정 로케일과 옵션에 맞춰 포맷할 때 사용하는 컴포넌트예요. 퍼센트, 통화, 단위 등 다양한 형식으로 숫자를 표시할 수 있어요.
출처: 문서
본문
사용법 (Usage)
숫자 포맷 로직은 네이티브 Intl.NumberFormat API가 처리하며, 동일한 로케일과 옵션을 사용할 때 성능 문제를 피하기 위해 스마트하게 캐시해요.
import { FormatNumber } from "@chakra-ui/react"
<FormatNumber value={1000} />
예제 (Examples)
퍼센트 (Percentage)
style=percentage prop을 사용해서 숫자 형식을 퍼센트로 바꿀 수 있어요.
| 예제 (format-number-with-percentage) |
통화 (Currency)
style=currency prop을 사용해서 숫자 형식을 통화로 바꿀 수 있어요.
| 예제 (format-number-with-currency) |
로케일 (Locale)
FormatNumber 컴포넌트를 LocaleProvider 안에 감싸서 로케일을 바꿀 수 있어요.
| 예제 (format-number-with-locale) |
단위 (Unit)
style=unit prop을 사용해서 숫자 형식을 단위로 바꿀 수 있어요.
| 예제 (format-number-with-unit) |
콤팩트 표기 (Compact Notation)
notation=compact prop을 사용해서 숫자 형식을 콤팩트 표기로 바꿀 수 있어요.
| 예제 (format-number-with-compact) |
Props
FormatNumber 컴포넌트는 다음 props에 더해 모든 Intl.NumberFormat 옵션을 지원해요.
| PropTable (Format / Number) |