[React] i18next 라이브러리로 다국어 처리하기

사내 제품의 다국어 처리를 맡게 되어 i18next 라이브러리를 적용하게 되었다.

쉽고 간단하게 사용할 수 있으며, 내용을 작성해 두면 다음에도 유용하게 사용할 수 있을 것 같다.

 

1. i18next란?

자바스크립트 환경을 위한 국제화 라이브러리

 

2. 사용 방법

1. 라이브러리 설치

# npm
npm install i18next react-i18next
# yarn
yarn add i18next react-i18next

 

2. 디렉터리 구조

PATH: src/i18n/

i18n/index.ts: 다국어 초기화 설정 파일

i18n/locales: locales별 JSON 파일 ( locales  또는 translation  이름 사용)

 

3. JSON 파일 생성

각 locale에 맞는 JSON 파일 생성

# en.json
{
  "ko": "Korean",
  "en": "English",
}

# ko.json
{
  "ko": "한국어",
  "en": "영어",
}

 

4. 다국어 초기화 설정

src/i18n/index.ts 파일을 생성한다.

import i18n from "i18next";

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

const resources = {
  en: { translation: { ...en } },
  ko: { translation: { ...ko } },
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en_US",// 기본 언어 설정.
  fallbackLng: "en_US", // 사용자의 언어를 감지하지 못했거나 지원하지 않는 언어일 때 사용될 기본 언어를 지정
});

export default i18n;

// resources 객체 형태
{
   en: {translation: {"ko": "Korean", "en": "English"}},
   ko: {translation: {"ko": "한국어", "en": "영어"}}
}

NS(Namespace)는 프로젝트 내의 큰 서비스 별로 나누어 사용하는 듯 하다. 작은 프로젝트에서는 하나의 NS로 관리해도 충분하다고 생각한다. react-i18next의 기본 NS는 translation이기 때문에 resources를 위와 같은 형태로 만들어 준다.

 

 

5.다국어 적용

프로젝트 구조에 따라 index.ts 또는 App.tsx에 I18nextProvider로 감싸준다.

 

6. 다국어 사용

사용할 컴포넌트에서 아래와 같이 사용한다.

onst { t } = useTranslation();

console.log("result: ", t("en")); //English

 

7. 다국어 동적 사용

json파일에 아래와 같이 작성한다.

{
  "ko": "Korean",
  "en": "English",
  "item": "item{{value}}"
}

 

사용할 컴포넌트에서 아래와 같은 형식으로 사용한다.

defaultNS인 translation를 사용하고 있기 때문에 useTranslation에 매개변수를 넣지 않아도 자동으로 translation 아래의 다국어를 불러온다.

const { t } = useTranslation();

const count = 2;
console.log("item: ", t("item", { value: count })); // item2

 

8. useTranslation()에 NS 설정

react-i18next 공식문서에서 useTranslation의 매개변수(NS)를 가져오는 내용이 있다.

const { t, i18n } = useTranslation(['ns1', 'ns2', 'ns3']);
t('key'); // will be looked up from namespace ns1
t('key', { ns: 'ns2' }); // will be looked up from namespace ns2

첫 번째 NS는 t('key')로 불러올 수 있지만 두 번째 NS부터는 key옆에 ns 객체를 따로 넣어줘야하는 번거로움이 있다.