react-i18next로 다국어처리

현재 일을 하면서 한국과 영어권 지역에 서비스를 하는 프로젝트에 참여하고 있는데
텍스트를 t( '...' ) 와 같은 형식으로 쓰여진 걸 보고 ?? 했는데 다국어 서비스를 위해서 쓰여진 것을 알게 되었다.

i18next

i18next는 자바스크립트에서 국제화 프레임워크로 쓰인다.
Node.js, PHP, iOS, Android 및 기타 플랫폼과 함께 i18next를 사용할 수도 있다.

react-i18next 라이브러리 적용

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

src에 lang 폴더를 만들어준다.

en(영어), ko(한국어) 폴더와 i18n.js 파일을 만들어 준다.

src/lang/i18n

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

import translationEn from './en/common.json'
import translationKo from './ko/common.json';

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

i18n.use(initReactI18next) // passes i18n down to react-i18next
    .init({
        resources,
        lng: "en",
        fallbackwLng: 'en', // detected lng이 불가능 할때 en을 사용하겠다.
        keySeparator: false, // 'messages.welcome' 와 같은 키 형식의 form을 사용할지 여부
        interpolation: {
            escapeValue: false
        }
    });

export default i18n;

App.js
i18n을 적용하기 위해서는 withTranslation() 을 실행하고 export 해야한다.

공식 페이지 withTranslation 설명

The withTranslation is a classic HOC (higher order component) and gets the t function and i18n instance inside your component via props.

import React from 'react';
import {withTranslation} from "react-i18next";
import MyComponent from './components/Korea';

const App = ({t, i18n}) => {
    return (
        <div>
            <div>{t('name')}</div>
            <div>
                <button onClick={() => {i18n.changeLanguage('en-US')}}>English</button>
                <button onClick={() => {i18n.changeLanguage('ko-KR')}}>한국어</button>
            </div>
            < Korea/>
        </div>
    );
};

export default withTranslation()(App);

i18n.changeLanguage를 사용하여 사용자가 원하는 원어로 변경할 수 있다.

useTranslation

함수형 컴포넌트에서 t function 이나 i18n 인스턴스를 사용할 수 있게 해주는 Hook이다.

t function은 컨텐츠에 국제화 작업을 위해 사용된다.

국제화를 적용할 컨텐츠가 있는 컴포넌트에 아래와 같이 적용해준다.

import React from 'react';
import { useTranslation } from 'react-i18next';
import './MyComponent.scss'

const MyComponent = () => {
    const { t } = useTranslation();
    return (
        <div className="container">
            <div>{t('hello')}</div>
            <div>{t('self-introduce')}</div>
        </div>
    );
};

export default MyComponent;