[React] i18next

들어가기 전

• 다국어 처리를 위해 i18next와 react-i18next 모듈을 활용

모듈 설치

# yarn으로 설치
yarn add react-i18next i18next

# npm으로 설치
npm install react-i18next i18next --save

translation.en.json

• <프로젝트>/src/lang/translation.en.json

{
    "message.hello": "Hello",
    "n.selected": "{{n}} selected."
}

translation.ko.json

• <프로젝트>/src/lang/translation.ko.json

{
    "message.hello": "안녕하세요",
    "n.selected": "{{n}} 개 선택됨."
}

i18n.js

• <프로젝트>/src/lang/i18n.js

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

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

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

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;

App.js

• <프로젝트>/src/App.js

import React from 'react';
import {withTranslation} from "react-i18next";

const App = ({t, i18n}) => {
    return (
        <div>
            <div>{t('message.hello')}</div>
            <div>{t('n.selected', {n: 5})}</div>
            <div>
                <button onClick={() => {i18n.changeLanguage('en-US')}}>English</button>
                <button onClick={() => {i18n.changeLanguage('ko-KR')}}>Korean</button>
                <button onClick={() => {i18n.changeLanguage('???')}}>Other</button>
            </div>
        </div>
    );
};

export default withTranslation()(App);

// 요즘은 아래 방식을 많이 사용
import React from 'react';
import { useTranslation } from 'react-i18next';

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

    return (
        <div>
            <div>{t('message.hello')}</div>
            <div>{t('n.selected', { n: 5 })}</div>
            <div>
                <button onClick={() => { i18n.changeLanguage('en-US') }}>English</button>
                <button onClick={() => { i18n.changeLanguage('ko-KR') }}>Korean</button>
                <button onClick={() => { i18n.changeLanguage('???') }}>Other</button>
            </div>
        </div>
    );
};

export default App;

index.js

• <프로젝트>/src/index.js

# 아래 임포트 구문 추가
import './lang/i18n';

다국어 데이터를 API로 받아 사용하기

모듈 설치

yarn add i18next-http-backend

i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';

i18n.use(Backend)
    .use(initReactI18next)
    .init({
        lng: 'ko',
        fallbackLng: 'ko',
        keySeparator: false, // we do not use keys in form messages.welcome
        interpolation: {
            escapeValue: false, // react already safes from xss
        },
        backend: {
            loadPath: '/locales/{{lng}}/{{ns}}.json',
        },
    });

export default i18n;

참고

• https://react.i18next.com/guides/quick-start
• https://www.i18next.com/translation-function/interpolation