🌍 59. React Native 다국어(i18n) 처리 전략 완전 정리

---

앱이 글로벌 유저를 대상으로 배포되기 시작하면
다국어(i18n, internationalization) 처리는 필수 조건이 된다.

React Native에서도 쉽고 유연하게 다국어 처리를 할 수 있는 도구들이 있다.
가장 많이 쓰이는 방식은 바로 i18next + react-i18next 조합이다.

---

🛠 기본 설치 및 셋업

npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector

📦 Expo 환경에선 추가 설정 없이 바로 가능

---

🔧 i18n 초기 설정 파일 만들기

// i18n.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './locales/en.json';
import ko from './locales/ko.json';

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

export default i18n;

---

🌐 번역 파일 구조

📁 locales
 ┣ 📄 en.json
 ┗ 📄 ko.json

// en.json
{
  "welcome": "Welcome",
  "login": "Login"
}

// ko.json
{
  "welcome": "환영합니다",
  "login": "로그인"
}

---

✅ 컴포넌트에서 번역 적용

import { useTranslation } from 'react-i18next';

export default function Home() {
  const { t } = useTranslation();
  return <Text>{t('welcome')}</Text>;
}

---

🌀 언어 변경 기능 추가

<Button title="🇺🇸 English" onPress={() => i18n.changeLanguage('en')} />
<Button title="🇰🇷 한국어" onPress={() => i18n.changeLanguage('ko')} />

• i18n.changeLanguage(code)로 언제든 실시간 언어 전환 가능
• 상태 유지 방법: AsyncStorage로 현재 언어 저장 후 앱 시작 시 적용

---

💡 다국어 처리 팁

항목	내용
디폴트 언어 설정	lng: 'ko', fallbackLng: 'en' 등으로 처리
텍스트 fallback	키 누락 시 key 자체 표시됨 ({t('missing.key')})
리스트/배열 처리	t('list', { returnObjects: true }) 사용
중첩된 텍스트	"title": { "main": "Hello", "sub": "World" } 형식 가능

---

📌 실전 적용 예시 (언어 설정 화면)

<View>
  <Text>{t('choose_language')}</Text>
  <Button onPress={() => i18n<.changeLanguage('en')} title="🇺🇸 English" />
  <Button onPress={() => i18n.changeLanguage('ko')} title="🇰🇷 한국어" />
</View>

---

✍️ 내가 느낀 점

웹에선 i18n을 자주 써봤지만,
React Native에서도 생각보다 편하게 적용되었다.
특히 다국어가 필수인 앱을 개발할 때
초기부터 구조적으로 준비해두면 나중에 시간 아낄 수 있음.

---

🌏 “전 세계 유저에게 다가가는 첫 걸음은 번역에서 시작된다.”

---