다국어 지원(i18n) — react-i18next로 번역 시스템 구축

npm install i18next react-i18next expo-localization

// i18n/index.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { getLocales } from 'expo-localization';
import ko from './locales/ko.json';
import en from './locales/en.json';
import ja from './locales/ja.json';

const deviceLanguage = getLocales()[0]?.languageCode ?? 'ko';

i18n.use(initReactI18next).init({
  resources: { ko: { translation: ko }, en: { translation: en }, ja: { translation: ja } },
  lng: deviceLanguage,
  fallbackLng: 'ko',
  interpolation: { escapeValue: false },
});

export default i18n;

// i18n/locales/ko.json
{
  "common": {
    "confirm": "확인",
    "cancel": "취소",
    "save": "저장",
    "delete": "삭제"
  },
  "home": {
    "title": "홈",
    "welcome": "{{name}}님 환영합니다",
    "itemCount": "{{count}}개의 항목"
  },
  "settings": {
    "title": "설정",
    "language": "언어",
    "darkMode": "다크 모드"
  }
}

// i18n/locales/en.json
{
  "common": {
    "confirm": "Confirm",
    "cancel": "Cancel",
    "save": "Save",
    "delete": "Delete"
  },
  "home": {
    "title": "Home",
    "welcome": "Welcome, {{name}}",
    "itemCount": "{{count}} items"
  },
  "settings": {
    "title": "Settings",
    "language": "Language",
    "darkMode": "Dark Mode"
  }
}

import { useTranslation } from 'react-i18next';

function HomeScreen() {
  const { t, i18n } = useTranslation();

  return (
    <View>
      <Text>{t('home.title')}</Text>
      <Text>{t('home.welcome', { name: '정훈' })}</Text>
      <Text>{t('home.itemCount', { count: 5 })}</Text>
    </View>
  );
}

// 언어 변경
function LanguageSelector() {
  const { i18n } = useTranslation();
  const languages = [
    { code: 'ko', label: '한국어' },
    { code: 'en', label: 'English' },
    { code: 'ja', label: '日本語' },
  ];

  return (
    <View>
      {languages.map((lang) => (
        <Pressable
          key={lang.code}
          onPress={() => {
            i18n.changeLanguage(lang.code);
            // MMKV/AsyncStorage에 저장
            storage.set('language', lang.code);
          }}
          style={{ padding: 16 }}
        >
          <Text style={{ fontWeight: i18n.language === lang.code ? 'bold' : 'normal' }}>
            {lang.label}
          </Text>
        </Pressable>
      ))}
    </View>
  );
}

// 날짜 포맷 (Intl API 활용)
function formatDate(date: Date, locale: string) {
  return new Intl.DateTimeFormat(locale, {
    year: 'numeric', month: 'long', day: 'numeric',
  }).format(date);
}

// 숫자/통화 포맷
function formatCurrency(amount: number, locale: string) {
  const currency = locale === 'ko' ? 'KRW' : locale === 'ja' ? 'JPY' : 'USD';
  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(amount);
}