[React] React에서 react-i18next 사용하는 방법 (다국어 처리)

프로젝트에서 다국어 지원 모바일 웹 사이트를 만들면서 번역 기능은 필수였다. 팀원이 맡아 구현했던 기능이지만 생각보다 간단하고 나중에 개인 프로젝트에도 적용해보고 싶어서 기록해보려고 한다.

---

json 방식으로 직접 보관하는 방법을 사용.

 

단계 1: 패키지 설치

$ npm i react-i18next i18next

 

단계 2: i18n.js설정

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translationEN from "locales/en/translation.json";
import translationKO from "locales/ko/translation.json";
import translationJP from "locales/jp/translation.json";
import translationCN from "locales/cn/translation.json";
const resources = {
  en: {
    translation: translationEN
  },
  ko: {
    translation: translationKO
  },
  jp: {
    translation: translationJP
  },
  cn: {
    translation: translationCN
  }
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: "ko", // 기본 설정 언어, 'cimode'로 설정할 경우 키 값으로 출력된다.
    fallbackLng: "ko", // 번역 파일에서 찾을 수 없는 경우 기본 언어
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

 

단계 3: 번역 파일 생성 transLation.json

 

예시 )

{
  "header": {
    "mypage": "My page",
    "logout": "Sign Out",
    "login": "Sign In",
    "register": "Sign Up",
    "language": "Languages",
    "help": "Help"
  },
  "nav": {
    "dashboard": "Dashboard",
    "shopping-mall": "Shopping Mall"
  }
}

 

 

단계 4: 번들링을 위해 import 하기

import { useTranslation } from 'react-i18next';
import Cookies from 'js-cookie';

 

단계 5: 번역 사용하기

const { t, i18n } = useTranslation();
 
const changeLanguage = (selectedLanguage) => {

    const languageMap = {
        Korea: 'ko',
        English: 'en',
        Japan: 'jp',
        China: 'cn'
    };

    const languageCode = languageMap[selectedLanguage] 
    i18n.changeLanguage(languageCode);

};

const savedLanguage = Cookies.get('selectedLanguage');
if (savedLanguage) {
  changeLanguage(savedLanguage); // 언어 변경
} else {
  changeLanguage('Korea'); // 기본 언어 설정
}

}, []);

 <h4>
	{t('WhichCard')} 
    <span >{t('Charge')}</span>
    {t('DoYouWantToRecharge')}
</h4>

 

 

 

출처
https://babycoder05.tistory.com/entry/React%EC%97%90%EC%84%9C-react-i18next-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95