[React] 다국어 기능 적용하기 react-i18next

홈페이지에 버튼 클릭으로

다국어를 지원하는 코드입니다.

 

리액트 기반이며 라이브러리로 i18next 사용했습니다.

 

 

위 이미지처럼 클릭시 언어가 변경 됩니다.

 

 

폴더 구조 입니다.

 

 

 

😎 src > utiles > i18n > locales > en-US > index.js

import page from './page.json'
 
export default{
    page
}

 

 

😎 src > utiles > i18n > locales > en-US > page.json

{
    "소개":"Intro",
    "인사말":"Greeting",
    "사업 소개":"BusinessInfo",
    "참여 기관":"Agency",
    "데이터":"Data",
    "안심":"Safe",
    "분석":"Analysis",
    "구역":"Zone",
    "마켓":"Market",
    "공지사항":"Notice",
    "회원가입":"SignUp",
    "로그인":"Login",
    "로그아웃":"Logout"
    
 }

제이슨 파일에 번역할 언어들을 작성합니다.

영문 한국어 각각 작성해야합니다.

{
    "소개":"소개",
    "인사말":"인사말",
    "사업 소개":"사업 소개",
    "참여 기관":"참여 기관",
    "데이터":"데이터",
    "안심":"안심",
    "분석":"분석",
    "구역":"구역",
    "마켓":"마켓",
    "공지사항":"공지사항",
    "회원가입":"회원가입",
    "로그인":"로그인",
    "로그아웃":"로그아웃"
 }

 

ex) '로그인' 이라는 단어가 kr일때, en 일때 어떤 단어로 출력할지 관리하는것 입니다.

 

 

 

😎 src > utiles > i18n > index.js

import i18n from "i18next";
 
// npm install react-i18next i18next --save
import { initReactI18next } from "react-i18next";
 
// # if you'd like to detect user language and load translation
// npm install i18next-http-backend i18next-browser-languagedetector --save
import detector from "i18next-browser-languagedetector";
 
import Backend from "i18next-http-backend";
 
import en from './locales/en-US';
import ko from './locales/ko-KR';
import cn from './locales/zh-CN';
 
i18n
  // .use(Backend)  //백엔드에서 리소스 가져올시
  .use(detector)  //사용자 언어 감지 : https://github.com/i18next/i18next-browser-languageDetect
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    // the translations
    // (tip move them in a JSON file and import them,
    // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
    // for all options read: https://www.i18next.com/overview/configuration-options
    resources: {
        ko:ko,
        en:en,
        cn:cn
    },
    // lng: "ko", //언어 감지기를 상요하는 경우 옵션 정의 X
    fallbackLng: "en",
    detection: { // languagedetector option
      order: ['querystring', 'htmlTag', 'cookie'], // detect 우선순위 
      lookupQueryString: 'lang', // ?lang=
      lookupCookie: 'i18n_lang' // cookie name
    },
    debug: true,
    saveMissing: true, //변환되지않는 키를 엔드포인트로 보냅니다.
    // keySeparator: false, //메세지 형식에서 키를 사용하지 않습니다.
    // ns:['pageKo','pageEn','pageCn'],    //ns는 namespace로 label, button, menu 등 구분해서 관리할 경우 필요
    interpolation: {
      escapeValue: false  
    }
  }, function(err) {
    if(err) console.error(err);
  });
 
  export default i18n

플로그인을 use 할수 있습니다.

 

 

 

위 이미지 처럼 화면 최상단에 다국어 버튼을 넣어줍니다.

저의 navi는 appHeader 입니다.

import React, {useEffect, useRef, useState} from 'react'
import { useTranslation } from 'react-i18next'
import { Link, withRouter } from 'react-router-dom'
 
import { COMMON_LANG_TYPE } from '../modules/action/actionTypes';
 
 
const AppHeader = (props) => {
	const { t, i18n } = useTranslation(['page']);
  	const langInfo = useSelector(state => state.common.Common_Lang_Type)
    
    
      const onChangeLang = () => {
        if(langInfo==='ko'){
          dispatch({ type: COMMON_LANG_TYPE, Common_Lang_Type: 'en'})
        }else if(langInfo==='en'){
          dispatch({ type: COMMON_LANG_TYPE, Common_Lang_Type: 'ko'})
        }
      }
 
      useEffect( () => {
        if(langInfo === undefined){
          dispatch({ type: COMMON_LANG_TYPE, Common_Lang_Type: 'ko'})
        }else {
          i18n.changeLanguage(langInfo)
        }
      },[langInfo])
  
    return (
    <Link to="/auth/login">{t('로그인')}</Link>
	<Link to="#" className="lang" onClick={onChangeLang}>{langInfo ==='ko'? 'KR' :'EN' }</Link>
    )
}
 
export default withRouter(AppHeader)

다국어 버튼 클릭시 전역적으로 state에 넣어 단어를 트랜스 해줍니다.

 

 

 

 

 

//다국어
import { useTranslation } from 'react-i18next'
 
//다국어
const { t, i18n } = useTranslation(['page']);

다른 페이지 에서 다국어 적용시

위 코드 두줄 추가해주셔야합니다

 

<div className="mtit">{t('데이터')} {t('현황')}</div>

단어의 경우

{t('데이터')}

이러한 형식으로 감싸줍니다