[React] i18n 다국어 지원하기

웹서비스를 하면서 다국어를 지원해야 하는 경우가 있다. 접속하는 국가 또는 지역에 따라서 다른 언어가 자동으로 지원되거나, 웹사이트에서 내에서 언어를 변경하는 기능이 제공 되기도 한다.

 

react-i18next

react-i18next는 React와 React Native 에서 사용할 수 있는 국제화 프레임 워크이다.

 

설치 방법

npm install react-i18next i18next — save

react-i18next는 react와 함께 사용할 수 있는 기능을 제공하고, i18next는 다국어 핵심 기능을 제공한다.

 

사용 방법

다국어 기능을 사용하기 위해서는 i18n 모듈을 임포트 하고 지원하고자 하는 언어별로 리소스를 추가하고 i18n 옵션 설정과 함께 초기화 시켜주면 된다.

 

//i18n.js

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

import translationEn from './translation.en';
import translationKo from './translation.ko';
import translationJa from './translation.ja';

const resources = {
    en: {
        translation: translationEn
    },
    ko: {
        translation: translationKo
    },
    ja: {
        translation: translationJa
    }
};

i18n.use(initReactI18next) // passes i18n down to react-i18next
    .init({
        resources,
        lng: "en",
        fallbackLng: 'en',
        keySeparator: false, // we do not use keys in form messages.welcome
        interpolation: {
            escapeValue: false // react already safes from xss
        }
    });

export default i18n;

 

위와 같이 완성된 i18n.js 파일을 최상위 index.js 에 추가 하자.

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './lang/i18n';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

다국어 기능이 동작하도록 해보자.

 

    import { useTranslation } from 'react-i18next';
    
    const { t, i18n } = useTranslation();
    
    /* lang 값 변경될때 마다 해당 lang 변환 */
    useEffect(() => {
        if (localStorage.getItem('lang') === 'korea') {
            i18n.changeLanguage('ko-KR');
        }
        else if (localStorage.getItem("lang") === 'usa') {
            i18n.changeLanguage('en-US');
        }
        else if (localStorage.getItem("lang") === 'japan') {
            i18n.changeLanguage('ja-JA');
        }
    }, [localStorage.getItem('lang')]);