✅ 79. React Native에서 다국어(i18n) 지원 완전 정리

---

앱을 글로벌 서비스로 운영한다면 다국어 지원(i18n, Internationalization)은 필수이다. React Native에서 다국어를 적용하는 방식은 생각보다 다양하며, 올바른 전략을 세우지 않으면 번역 관리나 성능 이슈가 발생할 수 있다. 이번 글에서는 i18n 구현 방법부터 라이브러리 비교, 실제 적용 팁까지 정리해본다.

---

1. 다국어(i18n)가 필요한 이유

1. 글로벌 사용자 대상 확장
2. 언어별로 다른 UX 제공
3. 법적/문화적 요구사항 대응 (예: 날짜/화폐 단위)
4. 사용자 만족도 증가

---

2. React Native에서 다국어 구현 방식

1) 하드코딩 방식 ❌

<Text>안녕하세요</Text>

• 유지보수 불가능
• 다국어 확장 불가

---

2) JSON 기반 번역 파일 ✅

// ko.json
{
  "welcome": "안녕하세요",
  "logout": "로그아웃"
}

// en.json
{
  "welcome": "Hello",
  "logout": "Logout"
}

import i18n from "i18n-js";
import * as Localization from "expo-localization";
import ko from "./locales/ko.json";
import en from "./locales/en.json";

i18n.translations = { ko, en };
i18n.locale = Localization.locale;
i18n.fallbacks = true;

<Text>{i18n.t("welcome")}</Text>;

---

3. 주요 라이브러리 비교

라이브러리	특징	추천 상황
i18n-js	가볍고 단순, Expo와 잘 맞음	소규모 앱
react-i18next	강력한 생태계, Suspense 지원, Lazy-loading 가능	중대형 앱
react-native-localize	언어/지역 자동 감지, 타임존, 달력, 화폐 등 로케일 처리 가능	글로벌 서비스
LinguiJS	CLI 기반 번역 관리, 메시지 포맷 강력	대규모 프로젝트

---

4. 다국어 처리 시 주의할 점

1. 문자열 길이 차이
   • 영어보다 독일어, 한국어가 길어질 수 있음 → UI 깨짐 주의
2. Right-to-Left 지원
   • 아랍어, 히브리어 지원 시 I18nManager 설정 필요
3. 날짜/숫자/통화 포맷
   • Intl API 또는 react-intl 사용
4. 번역 파일 관리
   • Crowdin, Lokalise 같은 번역 관리 도구 활용 추천

---

5. 실전 팁

• 앱 첫 실행 시 react-native-localize로 언어 감지 후 저장
• 사용자 설정으로 언어 선택 가능하게 하고 AsyncStorage에 저장
• 번역 키는 명확히 (auth.login.button) → 중복 방지
• UI 테스트 시 영어/독일어/아랍어를 꼭 함께 검증

---

🧠 정리

React Native에서 다국어 지원은 라이브러리 선택 + 번역 파일 관리 전략 + UI 대응이 핵심이다.
초기에는 i18n-js나 react-i18next로 시작해도 충분하고, 앱이 커지면 번역 관리 툴을 반드시 고려해야 한다.

---