RN | i18n - 다국어 처리

i18n

i18n 은 자바스크립트를 위해 작성된 국제화 프레임워크

react-i18next

yarn add react-i18next
i18n 국제화 프레임워크를 리액트와 함께 사용하도록 특별히 설계된 라이브러리로
활발한 커뮤니티를 형성하고 있다

1. 언어 파일 작성

lang.ts

export const Languages = {
	ko: {
    	language: '언어',
    },
  	en: {
    	language: 'Language',
    }
}

같은 key 값을 찾아 변환하기 때문에
type 으로 key 를 정의해두면 좋다

i18n 을 기존 프로젝트에 적용 시에는
한글 파일로만 전체 프로젝트 적용 후에
변환할 각 언어별 객체를 추가해주면 편하다
처음에는 테스트 용으로 다른 언어를 몇 개만 추가해놓고
테스트 후에는 기존 한글을 모두 i18n 으로 대체하는 것을 먼저 진행하면 된다

2. 설정 파일 작성

i18n.ts

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';

import {Languages} from './lang';

/**
 * React Native 환경을 위한 i18next 국제화 설
 * React Native 0.66+ 호환 설정 (i18next@21.x, react-i18next@11.x 기준)
 */
i18n.use(initReactI18next).init({
  /**
   * compatibilityJSON: i18next JSON 호환성 버전 설정
   * 'v4': React Native 0.66+에서 권장되는 버전
   * - v4는 복수형 처리와 JSON 구조에서 최신 기능을 지원
   * - React Native의 Hermes 엔진과 호환성이 좋음
   */
  compatibilityJSON: 'v4',

  /**
   * lng: 기본 언어 설정
   * 'ko': 한국어로 초기 언어 설정
   */
  lng: 'ko',

  /**
   * fallbackLng: 대체 언어 설정
   * 'en': 현재 언어에서 번역 키를 찾을 수 없을 때 영어로 대체
   */
  fallbackLng: 'en',

  /**
   * resources: 언어별 번역 리소스 설정
   * Languages 객체의 각 언어(ko, en, ja, vi)를 i18next 형식으로 변환
   * 형식: { 언어코드: { translation: 번역객체 } }
   * 예: { ko: { translation: { home: '홈' } } }
   */
  resources: Object.fromEntries(
    Object.entries(Languages).map(([key, value]) => [
      key,
      {translation: value},
    ]),
  ),

  /**
   * interpolation: 문자열 보간(변수 삽입) 설정
   */
  interpolation: {
    /**
     * escapeValue: HTML 이스케이프 처리 여부
     * false: React Native에서는 XSS 공격 위험이 없으므로 비활성화
     * 웹과 달리 RN은 DOM을 사용하지 않아 HTML 주입 공격이 불가능
     */
    escapeValue: false,
  },

  /**
   * react: React/React Native 특화 설정
   */
  react: {
    /**
     * useSuspense: React Suspense 사용 여부
     * false: React Native 환경에서 권장하는 설정
     * - Suspense는 주로 웹 환경의 코드 스플리팅에 사용
     * - RN에서는 번역 로딩이 동기적으로 처리되므로 불필요
     * - 앱 시작시 지연 없이 번역된 텍스트를 바로 표시
     */
    useSuspense: false,
  },
});

export default i18n;

3. 설정 파일 import

프로젝트 최상단에서 i18n.ts import

App.tsx 에서
import '@/module/language/i18n';

4. 컴포넌트에서 사용

react-i18next 의 useTranslation 훅을 이용하여 i18n 을 적용한다

import {useTranslation} from 'react-i18next';
const {t, i18n} = useTranslation();


return (
	<Text>{`${t('language')}: ${i18n.language}`}</Text>
)

t('language') 는 언어 설정 파일에서 설정한 key language 를 찾아서 가져오고
i18n.language 는 현재 설정된 언어를 보여준다 ('ko' | 'en'...)