React Router v7에서 통화 정보 표시하는 방법

문제

애플리케이션은 종종 형식화된 가격을 표시하지 않고 통화 정보를 표시해야 합니다. 통화 선택기는 "USD" 또는 "US Dollar"를 표시할 수 있고, 금융 대시보드는 "$" 기호만 표시할 수 있습니다. 각 형식은 다른 목적을 제공하지만 모두 공통적인 과제를 공유합니다. ISO 코드 "USD"는 정확하지만 비기술적 사용자에게는 익숙하지 않습니다. 전체 이름 "US Dollar"는 명확하지만 국제 사용자를 위해 번역이 필요합니다. "$" 기호는 간결하지만 모호합니다—맥락에 따라 미국, 캐나다 또는 호주 달러를 나타낼 수 있습니다. 잘못된 형식을 선택하면 사용자를 혼란스럽게 하고 금융 인터페이스에 대한 신뢰를 약화시킵니다.

다국어 애플리케이션을 구축할 때 이 문제는 더욱 복잡해집니다. 영어에서 작동하는 통화 이름이 다른 언어로 직접 번역되지 않을 수 있으며, 기호 규칙은 로케일에 따라 다릅니다. 이러한 값을 하드코딩하면 유지 관리 부담이 생기고 애플리케이션의 도달 범위가 제한됩니다.

해결책

react-intl의 formatDisplayName 메서드를 사용하여 현지화된 통화 이름과 코드를 표시하고, 브라우저의 Intl.NumberFormat API를 활용하여 통화 기호를 추출합니다. formatDisplayName 메서드는 통화 코드를 받아 사용자의 로케일에 기반한 적절한 현지화된 이름을 반환하며, 번역을 자동으로 처리합니다. 기호의 경우, 통화로 샘플 숫자를 형식화하고 결과에서 기호 부분을 추출합니다.

각 표시 형식—전체 이름, 기호 또는 코드—에 대해 집중된 헬퍼 함수나 컴포넌트를 만들어 각 컨텍스트에 맞는 올바른 표현을 선택할 수 있습니다. 이 접근 방식은 통화 표시 로직을 중앙 집중화하고 사용자 로케일 환경설정을 존중하면서 애플리케이션 전체에서 일관성을 보장합니다.

단계

1. 현지화된 통화 이름을 표시하는 헬퍼 만들기

ISO 통화 코드를 현지화된 전체 이름으로 변환하려면 type: 'currency'와 함께 formatDisplayName 메서드를 사용하세요.

import { useIntl } from "react-intl";

export function CurrencyName({ code }: { code: string }) {
  const intl = useIntl();
  const name = intl.formatDisplayName(code, { type: "currency" });
  return <span>{name}</span>;
}

로케일이 "en"이고 코드가 "CNY"일 때, 이 컴포넌트는 "Chinese Yuan"을 표시합니다. 이 메서드는 IntlProvider에서 제공하는 현재 로케일을 기반으로 이름을 자동으로 번역합니다.

2. 통화 기호를 추출하고 표시하는 헬퍼 만들기

Intl.NumberFormat과 formatToParts를 사용하여 type === "currency"인 부분을 필터링하여 통화 기호를 추출합니다.

function getCurrencySymbol(locale: string, currency: string): string {
  const parts = new Intl.NumberFormat(locale, {
    style: "currency",
    currency,
    currencyDisplay: "narrowSymbol",
  }).formatToParts(0);

  const currencyPart = parts.find((part) => part.type === "currency");
  return currencyPart?.value || currency;
}

export function CurrencySymbol({ code }: { code: string }) {
  const intl = useIntl();
  const symbol = getCurrencySymbol(intl.locale, code);
  return <span>{symbol}</span>;
}

currencyDisplay 옵션은 통화의 형태를 제어하며, "narrowSymbol"은 가장 간결한 표현을 제공합니다. 이 접근 방식은 로케일별 기호 배치 및 형식을 자동으로 처리합니다.

3. 여러 표시 옵션을 제공하는 컴포넌트 만들기

코드, 기호, 이름 형식 간에 전환할 수 있는 디스플레이 모드 prop을 받는 유연한 컴포넌트를 구축합니다.

import { useIntl } from "react-intl";

type CurrencyDisplayMode = "code" | "symbol" | "name";

interface CurrencyInfoProps {
  code: string;
  display?: CurrencyDisplayMode;
}

export function CurrencyInfo({ code, display = "symbol" }: CurrencyInfoProps) {
  const intl = useIntl();

  if (display === "name") {
    const name = intl.formatDisplayName(code, { type: "currency" });
    return <span>{name}</span>;
  }

  if (display === "symbol") {
    const parts = new Intl.NumberFormat(intl.locale, {
      style: "currency",
      currency: code,
      currencyDisplay: "narrowSymbol",
    }).formatToParts(0);
    const symbol =
      parts.find((part) => part.type === "currency")?.value || code;
    return <span>{symbol}</span>;
  }

  return <span>{code}</span>;
}

이 컴포넌트는 통화 표시 로직을 중앙 집중화하고 UI 컨텍스트에 따라 형식을 쉽게 전환할 수 있게 합니다. 명확성이 중요한 통화 선택기에는 display="name"을, 테이블 헤더와 같은 간결한 표시에는 display="symbol"을, 기술 또는 재무 보고서에는 display="code"를 사용하세요.

4. 다양한 컨텍스트에서 컴포넌트 사용하기

인터페이스에서 통화 정보가 표시되는 위치에 따라 적절한 표시 모드를 적용하세요.

export default function CurrencyExample() {
  return (
    <div>
      <label htmlFor="currency-select">
        통화 선택: <CurrencyInfo code="EUR" display="name" />
      </label>

      <table>
        <thead>
          <tr>
            <th>
              금액 (<CurrencyInfo code="USD" display="symbol" />)
            </th>
          </tr>
        </thead>
      </table>

      <p>
        거래 통화: <CurrencyInfo code="GBP" display="code" />
      </p>
    </div>
  );
}

각 컨텍스트는 목적에 가장 적합한 형식을 사용합니다: 선택 인터페이스에는 전체 이름, 간결한 표시에는 기호, 정확한 기술적 참조에는 코드를 사용합니다. 이 컴포넌트는 IntlProvider에서 제공하는 사용자의 로케일을 기반으로 자동으로 지역화를 처리합니다.