React i18n 다국어 지원하기

React에서 같은 페이지의 다국어를 적용하기 위해 사용하는 라이브러리

설치

npm install i18next react-i18next
yarn add i18next --save

셋팅

디렉토리에 lang.en.json , lang.ko.json 파일을 작성한다.

// lang.en.json
{
  "lang": "english",
  "welcome":hello!
}

//lang.ko.json
{
  "lang": "한국어",
  "welcome":"안녕!"
}

서로 전환 하고싶은 언어는 동일한 `key`값을 가져야 한다. `ex) "lang","welcome"`

// src/lang/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
 
import en from '@lang/lang.en';  // 위에서 만들어둔 json data
import ko from '@lang/lang.ko';  
 
const resource = {
  ko: {
      lang: Ko
  },
  en: {
      lang: en
  }
}
 
i18n
  .use(initReactI18next)
  .init({
    resources: resources, 
    lng: 'ko', //초기 설정 언어
    fallbackLng: 'ko',
    debug: true,
    defaultNS: 'lang',
    ns: 'lang',
    keySeparator: false, 
    interpolation: {escapeValue: false},
    //react: { useSuspense: false}
  })
 
export default i18n;

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from './app';
import 'lang/i18n';
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
  document.getElementById('root')
);

여기까지가 다국어 지원의 최소한의 셋팅이다.
이제 다국어 기능을 동작해보자.

실행

// App.js
import React from 'react'
import { useTranslation } from 'react-i18next'

function App() {
  //const { t, i18n } = useTranslation('lang') //서스펜스 사용시 
  const { t, i18n } = useTranslation('lang',{useSuspense: false}) //미사용시
  const onClickChangeKorean = () => i18n.changeLanguage('ko')
  const onClickChangeEnglish = () => i18n.changeLanguage('en')
  
  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('lang')}</p>
      <button onClick={onClickChangeKorean}>한국어</button>    //버튼으로 언어변경 
      <button onClick={onClickChangeEnglish}>English</button>  
    </div>
  )
}
export default App

프로젝트를 작업할때 다국어 처리를 해야 한다면
react-i18next를 사용해보자