[RN] i18next react-i18next 사용하는 방법

📱테스트 환경

"react": "19.0.0",
"react-native": "0.79.2"

---

이번에 새롭게 진행하는 프로젝트가

다국어를 지원해줬야 했기 때문에 해당 라이브러리를 사용했는데

사용방법이나 설정하는방법이 그리 어려운편은 아니지만 정리해두면 좋을것같아

시작한다.

// src/locales/i18n.ts

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

import ja from '~locales/ja/ja.json';
import ko from '~locales/ko/ko.json';
import zh from '~locales/zh/zh.json';

/*
 * 한앱에서 언어를 모두 처리하는경우 recoil 로 전역 관리 필요
 * 추구 요구사항 보고 개선 필요 여부 확인
 */

const resources = {
  ja: { translation: ja },
  ko: { translation: ko },
  'zh-CN': { translation: zh },
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'ja',
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

나는 아직 요구사항이 명확하게 정해지지않아서

전역관리는 하지않았지만 한 앱에서 모두 처리하는 경우 대응이 필요하다.

나는 일본어 / 중국어 / 한국어를 지원해주도록 했고,

기본언어를 일본어로 설정하였다.

언어세팅을 하는 방법도 간단하다.

// src/locales/ja/ja.json

{
  "placeholder": {
    "search": "場所、地下鉄、住所検索",
    "departure": "出発地入力",
    "arrival": "到着地入力"
  },
  "category": {
    "gourmet": "グルメ",
    "cafe": "カフェ",
    "hotel": "ホテル",
    "spot": "スポット"
  },
  "route": {
    "subway": "地下鉄",
    "taxi": "タクシー",
    "walk": "徒歩",
    "currentLocation": "現在位置",
    "favorite": "お気に入り",
    "selectFromMap": "地図から選択",
    "recentSearch": "最近検索したスポット",
    "recentViewed": "最近検索したスポット",
    "seeMoreHistory": "スポット検索履歴をもっと見る",
    "seeMoreRouteHistory": "ルート検索履歴をもっと見る",
    "route": "ルート"
  },
  "weather": {
    "refresh": "このエリアで天気を再検索",
    "title": "ソウルの天気",
    "cloudyWithSunnySpells": "曇り時々晴れ",
    "humidity": "湿度",
    "wind": "風向·風速",
    "rain": "降水量",
    "windDirection": "西南西 1.2m/s",
    "weatherInformation": "気象情報提供",
    "few" : "少ない",
    "somewhatMany": "やや多い",
    "many": "多い",
    "veryMany": "非常に多い"
  },
  "modal": {
    "yes": "はい",
    "no": "いいえ"
  },
  "store": {
    "nearby": "周辺のお店"
  },
  "popular": "人気エリア"
}

지원하려는 언어 .json 파일을 모두 세팅해준다음

사용할때는

<Text color={theme.colors.neutral_90} fontSize={16} fontWeight={700}>{t('route.recentViewed')}</Text>

이런식으로 t 안에 .json 에서 설정한 값을 넣어주면

핸드폰 언어설정에 따라서 자동으로 바뀐다.

만약 해당 언어 값이 없는 경우 해당 텍스트로 기본값이 나와버리기때문에

지원하려는 언어 전부 누락없이 잘 적도록 하자.