React에서 국제화된 날짜·숫자 포맷 처리

소개

웹 서비스는 전 세계 사용자를 대상으로 할 때 날짜와 숫자 표기가 달라진다. React 환경에서 국제화(i18n)를 고려하면 사용자 경험이 크게 개선된다. 이 글은 기본 Intl API와 react-intl을 중심으로 날짜·숫자 포맷을 단계별로 설명한다. 초보자도 따라오기 쉽도록 예제와 주의사항을 함께 제공한다.

왜 국제화된 포맷이 중요한가

같은 날짜와 숫자라도 표기 방식이 나라마다 다르다. 이를 무시하면 오해가 발생하고 신뢰도가 떨어진다. 예를 들어 03/04/2025가 미국에서는 3월 4일, 일부 유럽권에서는 4월 3일로 해석된다. 숫자 소수점 구분자와 천 단위 구분자도 지역마다 다르다. 따라서 애플리케이션 수준에서 일관된 포맷 정책이 필요하다.

브라우저 기본: Intl API

날짜 포맷 (Intl.DateTimeFormat)

Intl.DateTimeFormat은 브라우저에 내장된 국제화 포맷 기능이다. 지역(locale)과 옵션만 전달하면 된다. 가벼우며 외부 라이브러리 의존도가 없다.

const dtf = new Intl.DateTimeFormat('ko-KR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'short'
});

const formatted = dtf.format(new Date('2025-03-04'));
console.log(formatted); // 예: "2025년 3월 4일 화"

숫자 포맷 (Intl.NumberFormat)

숫자 포맷은 통화, 퍼센트, 소수 자리 제어 등에서 유용하다.

const nf = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR'
});

console.log(nf.format(12345.67)); // "12.345,67 €"

React와의 접목: 기본 원칙

• 데이터는 표준 형식(ISO 8601 등)으로 저장
• 표시 시점에 로케일을 적용
• 사용자 설정을 우선시하되, 기본 로케일은 서버 혹은 브라우저를 사용

react-intl 사용하기

react-intl은 React에 친화적인 국제화 라이브러리다. 메시지 번역과 함께 날짜·숫자 포맷 컴포넌트를 제공한다.

import { IntlProvider, FormattedDate, FormattedNumber } from 'react-intl';

function App({ locale }) {
  return (
    <IntlProvider locale={locale}>
      <div>
        <FormattedDate value={new Date()} year="numeric" month="long" day="2-digit" />
        <FormattedNumber value={12345.67} style="currency" currency="USD" />
      </div>
    </IntlProvider>
  );
}

위 예제는 JSX를 사용한 형태다. IntlProvider에 locale을 바꾸면 내부의 FormattedDate, FormattedNumber가 자동으로 포맷을 적용한다.

실전 예제: 로케일 전환 컴포넌트

사용자가 로케일을 바꿀 수 있도록 하면 유연성이 높아진다. 아래는 간단한 토글 예제다.

import React, { useState } from 'react';
import { IntlProvider, FormattedDate, FormattedNumber } from 'react-intl';

function LocaleSwitcher() {
  const [locale, setLocale] = useState('en-US');

  return (
    <IntlProvider locale={locale}>
      <div>
        <button onClick={() => setLocale('en-US')}>EN</button>
        <button onClick={() => setLocale('ko-KR')}>KO</button>

        <p>날짜: <FormattedDate value={new Date()} year="numeric" month="long" day="numeric" /></p>
        <p>금액: <FormattedNumber value={98765.43} style="currency" currency={locale === 'ko-KR' ? 'KRW' : 'USD'} /></p>
      </div>
    </IntlProvider>
  );
}

export default LocaleSwitcher;

주의사항과 팁

• 숫자나 날짜를 문자열로 저장하지 말고 표준형으로 저장한다. 변환 시점에 로케일 적용이 더 안전하다.
• 서버와 클라이언트의 로케일 불일치에 유의한다. 서버에서 일부 렌더링을 수행하면 동일한 로케일 정보를 전달해야 한다.
• 브라우저 지원 여부를 확인한다. 오래된 환경에서는 Intl가 없을 수 있으므로 폴리필을 고려한다.
• react-intl의 메시지 번들 관리는 별도 시스템(예: 번들 파일, CDN, 백오피스)으로 구성한다.

정리

React에서 국제화된 날짜·숫자 포맷은 Intl API와 react-intl을 적절히 조합하면 안정적으로 구현할 수 있다. 데이터는 표준으로 보관하고, 렌더 시점에 로케일을 적용하는 것이 핵심이다. 마지막으로 브라우저 호환성과 서버-클라이언트 일관성을 항상 점검한다.