숫자 서식 지정하기

문제

독일에서는 10000.5와 같은 큰 숫자가 10.000,5로 표기되고 미국에서는 10,000.5로 표기됩니다. 한 지역의 표기법으로 숫자를 표시하면 다른 지역의 사용자들이 소수점과 천 단위 구분 기호가 잘못되어 값을 오해할 수 있습니다.

해결책

react-intl의 FormattedNumber와 같은 전용 포맷팅 컴포넌트를 사용하세요. 이 컴포넌트는 자동으로 프로바이더에서 현재 언어를 읽고 number 원시 타입을 올바른 로케일별 소수점 및 천 단위 구분 기호를 사용하는 문자열로 포맷팅합니다.

단계

1. 숫자를 위한 클라이언트 컴포넌트 생성

다른 react-intl 컴포넌트와 마찬가지로 FormattedNumber는 클라이언트 컴포넌트 내에서 사용해야 합니다.

포맷팅된 숫자를 표시할 새 컴포넌트 app/components/ProductInfo.tsx를 생성하세요.

// app/components/ProductInfo.tsx
'use client';

import { FormattedNumber } of 'react-intl';

type Props = {
  reviewCount: number;
  averageRating: number;
};

export default function ProductInfo({ reviewCount, averageRating }: Props) {
  return (
    <div>
      <h3>Product details</h3>
      <p>
        Total reviews:
        {/* Basic number formatting */}
        <FormattedNumber value={reviewCount} />
      </p>
      <p>
        Average rating:
        {/* Formatting with options */}
        <FormattedNumber
          value={averageRating}
          minimumFractionDigits={1}
          maximumFractionDigits={1}
        />
      </p>
    </div>
  );
}

2. 포맷팅 옵션 전달

FormattedNumber 컴포넌트는 출력을 제어하기 위한 옵션을 받습니다:

value는 포맷팅할 number입니다.
minimumFractionDigits와 maximumFractionDigits는 여기서 소수점 한 자리를 강제로 표시하는 데 사용됩니다(예: 4.0).

3. 페이지에서 컴포넌트 사용

이제 제품 정보를 표시하는 모든 페이지에서 이 컴포넌트를 사용할 수 있습니다.

// app/[lang]/page.tsx
import ProductInfo from '@/app/components/ProductInfo';

export default function Home() {
  const product = {
    reviews: 1234567,
    rating: 4.0,
  };

  return (
    <div>
      <h1>Welcome</h1>
      <ProductInfo
        reviewCount={product.reviews}
        averageRating={product.rating}
      />
    </div>
  );
}

/en을 방문하는 사용자는 "Total reviews: 1,234,567"와 "Average rating: 4.0"을 볼 것입니다. /es를 방문하는 사용자는 "Total reviews: 1.234.567"와 "Average rating: 4,0"을 볼 것입니다.