가격 형식 지정 - Next.js i18n

문제

가격을 표시하려면 숫자와 통화가 모두 필요합니다. 미국 가격은 $1,200.50이지만, 독일에서는 동일한 값이 유로로 1 200,50 €일 수 있습니다. 통화 기호의 위치, 소수점 구분 기호, 천 단위 구분 기호가 모두 변경되며, 모든 언어에 대해 이러한 규칙을 하드코딩하는 것은 관리가 불가능합니다.

해결 방법

react-intl의 FormattedNumber 컴포넌트를 style: 'currency' 옵션과 함께 사용하세요. 이 컴포넌트는 프로바이더에서 현재 로케일을 읽고 숫자를 가격으로 포맷하며, 해당 로케일과 지정된 통화에 대한 기호 배치, 소수점 구분 기호, 천 단위 구분 기호를 자동으로 처리합니다.

단계

1. 가격용 클라이언트 컴포넌트 생성

react-intl의 포맷팅 컴포넌트는 클라이언트 컴포넌트 내에서 사용해야 합니다.

새 컴포넌트 app/components/ProductPrice.tsx를 생성하세요.

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

import { FormattedNumber } from 'react-intl';

type Props = {
  price: number;
  currencyCode: string; // e.g., "USD", "EUR", "JPY"
};

export default function ProductPrice({ price, currencyCode }: Props) {
  return (
    <FormattedNumber
      value={price}
      style="currency"
      currency={currencyCode}
    />
  );
}

2. 형식 지정 옵션 전달

FormattedNumber 컴포넌트는 다음 props로 제어됩니다:

value: 가격의 숫자 값입니다.
style: 'currency': 컴포넌트에 숫자를 표준 소수가 아닌 통화로 포맷하도록 지시합니다.
currency: 세 글자 ISO 통화 코드(예: 'USD', 'EUR')입니다. style: 'currency'를 사용할 때 필수입니다.

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

이제 서버 또는 클라이언트 컴포넌트에서 이 컴포넌트를 사용하여 가격을 표시할 수 있습니다.

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

export default function Home() {
  const product = {
    price: 1299.99,
    currency: 'USD',
  };

  const productInEuros = {
    price: 1199.5,
    currency: 'EUR',
  };

  return (
    <div>
      <h1>Product</h1>
      <p>
        Price (USD): <ProductPrice price={product.price} currencyCode={product.currency} />
      </p>
      <p>
        Price (EUR): <ProductPrice price={productInEuros.price} currencyCode={productInEuros.currency} />
      </p>
    </div>
  );
}

/en를 방문하는 사용자는 "Price (USD): $1,299.99" 및 "Price (EUR): €1,199.50"을 보게 됩니다. /es를 방문하는 사용자는 "Price (USD): 1299,99 US$" 및 "Price (EUR): 1199,50 €"를 보게 됩니다.