🌍 48. React Native 다국어(i18n) 지원 완전 정리 — i18next, 언어 감지, 언어 전환까지

---

앱을 전 세계로 배포하거나,
기본적으로 한국어/영어를 모두 지원하고 싶다면
다국어 처리(i18n: Internationalization)가 필요하다.

웹에서는 간단한 문자열 치환 정도였던 게,
React Native에서는 언어 감지, 변경, 상태 저장까지 더 고려해야 할 요소가 많다.

이번 글은 React Native에서 다국어 처리 구조를 처음부터 설계하고 적용하는 방법을 정리한 글이다.

---

✅ 기본 i18n 라이브러리: react-i18next + i18next

npm install i18next react-i18next i18next-browser-languagedetector
npm install @react-native-async-storage/async-storage

Expo를 사용하는 경우 expo-localization도 함께 사용

npx expo install expo-localization

---

🔧 i18n 초기 설정 (i18n.ts)

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as Localization from 'expo-localization';
import AsyncStorage from '@react-native-async-storage/async-storage';

import en from './locales/en.json';
import ko from './locales/ko.json';

i18n
  .use(initReactI18next)
  .init({
    compatibilityJSON: 'v3',
    lng: Localization.locale.split('-')[0], // ex: 'ko', 'en'
    fallbackLng: 'en',
    resources: {
      en: { translation: en },
      ko: { translation: ko },
    },
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

---

🗂️ 다국어 리소스 예시

locales/
├── en.json
└── ko.json

// en.json
{
  "greeting": "Hello!",
  "login": {
    "title": "Login",
    "button": "Sign in"
  }
}

// ko.json
{
  "greeting": "안녕하세요!",
  "login": {
    "title": "로그인",
    "button": "로그인"
  }
}

---

🔤 실제 사용 예시

import { useTranslation } from 'react-i18next';

const { t } = useTranslation();

<Text>{t('greeting')}</Text>
<Text>{t('login.title')}</Text>

---

🌐 언어 변경 기능 추가

const changeLanguage = (lng: 'en' | 'ko') => {
  i18n.changeLanguage(lng);
  AsyncStorage.setItem('lang', lng); // 선택한 언어 저장
};

• 앱 설정 페이지에 언어 변경 버튼 UI 추가
• 앱 재시작 시 AsyncStorage로 저장된 언어 적용 가능

---

🧠 실전 설계 팁

항목	전략
기본 언어	expo-localization or 브라우저 언어 기반 설정
fallback 언어	'en' 또는 'ko'로 명확히 설정
다국어 키 이름	소문자 + dot notation (login.title) 추천
텍스트 다수일 경우	useTranslation() 대신 Trans 컴포넌트 사용 가능
테마, 언어, 모드 같이 관리	Zustand 또는 Context로 appSettings 분리 가능

---

📝 내가 느낀 점

다국어 처리를 단순히 "문자열 바꾸기"라고 생각했는데,
실제로 해보면 앱의 전반적인 구조에 영향을 주는 요소라는 걸 알게 됐다.

특히 언어 변경 후 앱 전체 리렌더링 처리,
비동기 로딩, 저장 방식 등에서 신경 써야 할 점이 많았다.

지금은 상태 저장은 AsyncStorage,
초기 언어 감지는 expo-localization,
문자열은 json 관리로 안정적으로 사용하고 있다.

---

🌏 “앱의 확장성은 i18n 설계에서 시작된다.”

---