통화 이름 및 기호 표시

문제

애플리케이션에서 'USD'와 같은 통화를 참조해야 합니다. 단순히 이 코드를 보여주는 것은 이해하기 어렵습니다. 'US Dollar'와 같은 전체 이름을 보여주는 것이 더 좋지만, 이 이름 자체도 번역이 필요합니다('dólar estadounidense', 'Dollar américain'). 또한, 올바른 기호($, US$, CA$)는 맥락 없이는 모호할 수 있습니다.

해결책

react-intl의 FormattedNumber 컴포넌트를 currencyDisplay 옵션과 함께 사용하세요. 이를 통해 현재 로케일에 맞게 올바르게 포맷팅되면서 통화를 기호(기본값), 현지화된 전체 이름 또는 ISO 코드로 표시할 수 있습니다.

단계

1. 통화 표시를 위한 클라이언트 컴포넌트 생성하기

FormattedNumber 컴포넌트는 클라이언트 컴포넌트 내에서 사용해야 합니다. 재사용 가능하도록 currencyDisplay 옵션을 prop으로 받는 app/components/LocalizedCurrency.tsx 파일을 생성하세요.

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

import { FormattedNumber } from 'react-intl';

type Props = {
  value: number;
  currency: string;
  displayAs: 'symbol' | 'name' | 'code';
};

export default function LocalizedCurrency({
  value,
  currency,
  displayAs,
}: Props) {
  return (
    <FormattedNumber
      value={value}
      style="currency"
      currency={currency}
      currencyDisplay={displayAs}
    />
  );
}

이 컴포넌트는 이제 currencyDisplay 옵션을 직접 제어하는 displayAs prop을 받습니다.

2. 페이지에서 컴포넌트 사용하기

이제 displayAs prop을 변경하여 다양한 통화 형식을 보여주는 페이지에서 이 컴포넌트를 사용할 수 있습니다.

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

export default function Home() {
  const price = 1250.75;
  const currency = 'USD';

  return (
    <div>
      <h1>통화 표시 옵션</h1>
      <p>
        기본값(기호):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="symbol"
        />
      </p>
      <p>
        전체 이름(name):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="name"
        />
      </p>
      <p>
        ISO 코드(code):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="code"
        />
      </p>
    </div>
  );
}

/en을 방문하면 'name' 옵션에 대해 "1,250.75 US dollars"가 표시됩니다. /es를 방문하면 동일한 줄이 "1.250,75 dólares estadounidenses"로 렌더링되어 통화 이름 자체가 올바르게 번역되고 포맷팅되었음을 보여줍니다.