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

문제

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

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

솔루션

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

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

단계

1. 현지화된 통화 이름을 표시하는 헬퍼 생성

type: 'currency'와 함께 formatDisplayName 메서드를 사용하여 ISO 통화 코드를 현지화된 전체 이름으로 변환합니다.

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. 통화 기호를 추출하고 표시하는 헬퍼 생성

formatToParts와 함께 Intl.NumberFormat를 사용하여 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">
        Select currency: <CurrencyInfo code="EUR" display="name" />
      </label>

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

      <p>
        Transaction currency: <CurrencyInfo code="GBP" display="code" />
      </p>
    </div>
  );
}

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