[React] 다국어 변환 라이브러리 i18n

웹 사이트에서 글로벌 서비스를 위해 여러 국가의 언어를 지원할 수 있도록 되도록 i18n 라이브러리를 사용해보자!

자동 번역이 되는 것은 아니고, 번역된 데이터가 담긴 JSON 파일을 프로젝트에 삽입 후, 국가 코드를 변경할 때마다 각 국가에 해당하는 JSON 파일을 읽어와 화면에 출력 해준다.

 

설치

npm install react-i18next i18next --save

yarn add react-i18next i18next

 

언어 파일

translation_ko.json

프로젝트 내에 다음과 같은 JSON 파일을 생성한다. JSX내에서 Key를 text로서 사용하면 국가 코드에 따라 Value를 출력한다.

 

i18n 설정

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

//JSON 파일 import
import translationKo from "./translation.ko.json";
import translationEn from "./translation.en.json";

const resource = {
//국가 코드와 JSON 파일 match
  ko: {
    translation: translationKo,
  },
  en: {
    translation: translationEn,
  },
};

i18n.use(initReactI18next).init({
  resources: resource,
  lng: "en", //default 국가 코드
  debug: true,
  keySeparator: false,
  interpolation: { escapeValue: false },
});

//브라우저 DB에 기록된 언어가 있으면 해당 언어를 불러온다.
let language = localStorage.getItem("language");
if(language!==null)
i18n.changeLanguage(language);

//국가 코드를 변경하는 함수
export function changeLanguage() {
  i18n.changeLanguage(i18n.language === "ko" ? "en" : "ko");
  //브라우저 DB에 기록
  localStorage.setItem("language", i18n.language);
}

export default i18n;

기본적인 설정과 국가 코드를 변경하는 함수를 담은 파일을 생성한다.

 

최상위에서 호출

import "./Service/Translation/i18n";

최상위에서 해당 파일을 import 한다. import시 파일이 Read 되어진다.

 

useTranslation

const { t, i18n } = useTranslation();

useTranslation을 다음과 같이 선언한다.

 

현재 국가 코드 반환

i18n.language

 

다국어 지원 텍스트 출력

`${t('Blog')}` //JSON에 따라 '블로그'로 출력