frontendreact

React-i18next/i18n 다국어 적용하기

create-react-app, frontend, i18n, i18next, react, react-i18next
Views: 508

시작하기

웹사이트를 제작할때 다국어를 지원해야하는 경우가 있습니다.
이때 사용하는 라이브러리로 i18n이 있습니다.
의미로는 internationalization (“I18N”) / 국제화 라고합니다.
i와 n사이에 18글자가 있어서 i18n 이라는 명칭입니다.

React i18next 홈페이지

리액트 i18next를 연동해보도록 하겠습니다.

패키지 설치

패키지를 설치합니다.
npm install react-i18next i18next --save

이후 사용자 언어 탐지 및 로딩 변환이 필요한 경우를 위한 패키지를 설치하겠습니다.
npm install i18next-xhr-backend i18next-browser-languagedetector --save

i18next 초기설정

src 폴더에 새폴더i18n를 만들어줍니다.
i18n 폴더 내부에 en.json, ko.json, i18n.ts 세가지 파일을 만들어줍니다.
이후 다음과 같이 설정합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// i18n/en.json
{
  "hello": "Hello World!",
  "post": {
    "title": "title",
    "name":"Hong"
  }
}

// i18n/ko.json
{
  "hello": "헬로 월드!",
  "post": {
    "title": "타이틀",
    "name":"홍"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import i18n from 'i18next';
import { initReactI18next } from 'source/_posts/redux/react-i18next';

import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

import ko from './i18n/ko.json';
import en from './i18n/en.json';

i18n
    // load translation using xhr -> see /public/locales
    // learn more: https://github.com/i18next/i18next-xhr-backend
    .use(Backend)
    // detect user language
    // learn more: https://github.com/i18next/i18next-browser-languageDetector
    .use(LanguageDetector)
    // pass the i18n instance to react-i18next.
    .use(initReactI18next)
    // init i18next
    // for all options read: https://www.i18next.com/overview/configuration-options
    .init({
        fallbackLng: 'en',
        debug: true,

        resources: {
            ko: {
                lang: ko
            },
            en: {
                lang: en
            }
        },

        ns: ['lang'],

        interpolation: {
            escapeValue: false, // not needed for react as it escapes by default
        }
    });


export default i18n;

index.tsx파일에 i18n.ts를 추가합니다.

1
2
3
4
5
6
7
8
9
10
import React from "";
import ReactDOM from "react-dom";
import App from './App';
 
import './i18n';

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

사용하기

리액트의 서스펜스를 사용하지 않을때는 useTranslation의 두번째인자로 useSuspense:false를 인자로 넣어줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 서스펜스를 사용하지 않을때
const I18nextComponent: React.FC = () => {
    const [t, i18n] = useTranslation('lang', { useSuspense: false });
    return <div>
        <p>{t('hello')}</p>
        <p>{t('post.title')}</p>
        <p>{t('post.name')}</p>
    </div>
};

// 서스펜스를 사용시
//...
    const [t, i18n] = useTranslation('lang');
//...

Language 변경방법

1
2
3
4
5
6
7
8
9
10
const I18nextComponent: React.FC = () => {
    const [t, i18n] = useTranslation('lang', { useSuspense: false });
    return <div>
        <button onClick={() => i18n.changeLanguage('en')}>영어</button>
        <button onClick={() => i18n.changeLanguage('ko')}>한국어</button>
        <p>{t('hello')}</p>
        <p>{t('post.title')}</p>
        <p>{t('post.name')}</p>
    </div>
};

i18n.changeLanguage()를 이용합니다.
i18n.ts에서 설정한 옵션의 resources 이름을 넣어줍니다.

작은 팁

디버깅모드를 개발자모드에서만 하고 싶다면 다음과 같이 설정합니다.

1
2
3
4
5
6
// ...
    .init({
        //...
        debug: process.env.NODE_ENV === 'development',
        //...
// ...

결과물

이전 포스트를 참조 하시면 더욱 간결하게 설정할수 있습니다.
환경변수 이용하기

Share