Intl.NumberFormat()

① MDN 스타일 요약 Intl.NumberFormat 객체는 언어에 맞는 숫자 서식을 지정할 수 있는 생성자입니다. 단순히 콤마(,)를 찍는 것을 넘어, 전 세계 통화 단위(₩, $, €), 백분율(%), 단위(kg, m) 등을 사용자의 브라우저 설정(로케일) 혹은 개발자가 지정한 형식에 맞춰 자동으로 변환해 줍니다.

---

② React 실무 예시 Next.js 쇼핑몰 프로젝트에서 상품 가격을 한국 원화 형식으로 보여주거나, 대시보드에서 증감률을 표시할 때 유틸리티 함수로 만들어 두면 매우 편리합니다.

import React from 'react';

const ProductCard = ({ price, discountRate }) => {
  // 1. 한국 원화 포맷터 (₩ 10,000)
  const wonFormatter = new Intl.NumberFormat('ko-KR', {
    style: 'currency',
    currency: 'KRW',
  });

  // 2. 퍼센트 포맷터 (15%)
  const percentFormatter = new Intl.NumberFormat('ko-KR', {
    style: 'percent',
  });

  return (
    <div className="p-4 border rounded-xl shadow-sm bg-white w-64">
      <div className="h-40 bg-gray-100 rounded-md mb-3" />
      <h3 className="font-semibold text-lg">최신형 무선 키보드</h3>
      
      <div className="flex items-center gap-2 mt-2">
        <span className="text-red-500 font-bold">
          {percentFormatter.format(discountRate)}
        </span>
        <span className="text-xl font-extrabold text-gray-900">
          {wonFormatter.format(price)}
        </span>
      </div>
      
      <p className="text-xs text-gray-400 mt-1 italic">
        * 배송비 포함 가격
      </p>
    </div>
  );
};

// 사용 예시
export default function Shop() {
  return (
    <div className="p-10">
      <ProductCard price={45000} discountRate={0.15} />
    </div>
  );
}

실무 활용 포인트:

• 다양한 옵션: notation: 'compact' 옵션을 쓰면 "1,000,000"을 "100만" 또는 "1M"으로 줄여서 표기할 수도 있습니다.
• 성능: 대량의 숫자를 포맷팅해야 한다면, 루프 안에서 매번 생성하지 않고 포맷터 인스턴스를 하나 만들어 재사용하는 것이 좋습니다.
• 유지보수: price.toLocaleString()보다 훨씬 정교한 옵션(소수점 자리수 제한 등)을 제공하여 비즈니스 요구사항에 대응하기 좋습니다.