React i18next 다국어 처리

1. i18next란

JavaScript로 작성된 국제화 프레임 워크로

여러 국가의 언어를 처리할 수 있도록 하는 것이다.

 

2. i18next 설치

npm install react-i18next --save

 

3. i18next을 사용한 다국어 처리

1) 3개의 파일 생성

src/config/lang/i18n.js
src/config/lang/translation.ko.json
src/config/lang/translation.en.json

첫 번째 사이트를 참고하여 만들었습니다.

 

 

2)  translation.ko.json, translation.en.json 파일 작성

 

i18n.js 파일을 작성하기 전, 한국어와 영어,

두 가지 버전을 보여주기 위한 json 파일을 만들고 데이터들을 넣어줍시다.

{
  "header": {
    "lang": "English"
    "subMenu": {
      "company": [
        "This", "is", "example"
      ]
    }
  },
  "content": {
     ...

{
  "header": {
    "lang": "한국어"
    "subMenu": {
      "company": [
        "이것은", "예시", "입니다"
      ]
    }
  },
  "content": {
     ...

 

3) i18n.js 파일 작성

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

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

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

i18n.use(initReactI18next).init({
  resources: resource,
  lng: "ko",
  fallbackLng: "ko",

  debug: true,
  keySeparator: ".", // we do not use keys in form messages.welcome
  interpolation: {
    escapeValue: false, // react already safes from xss
  },
});

export default i18n;

그리고 i18next 라이브러리를 불러와서

translation.ko.json, 즉 한국어 json 파일과

translation.en.json, 영어 json 파일을 각각 resources에 맞게 넣어줍니다.

 

이 때 heaer.lang 이런식으로 객체 안의 값들에 접근해주기 위해서는

KeySeparator 옵션 값에 "."을 넣어주셔야합니다.

 

 

4) 다국어 데이터 화면에 출력

...

import { withTranslation } from "react-i18next";
import dompurify from "dompurify";

class Example extends React.Component {

  render() {    
    const { t } = this.props;
    const sanitizer = dompurify.sanitize;
    
    return (
      <>
        <div>{t("header.lang")}</div>
        <div dangerouslySetInnerHTML={{ __html: sanitizer(t("header.lang")) }}></div>
      </>
    )
  }
}

마지막으로 데이터를 화면에 출력하는 방법으로

{t("header.lang")} 이렇게 사용해주시면 되지만

 

만약 json 데이터에 html 태그가 들어있는 경우에는

dangerouslySetInnerHTML와 dompurify 라이브러리와 함께 사용하여 써주시면 됩니다.

(예를 들어 배열에 This, is, example이 아니라

<h1>This</h1>, <h2>is</h2>, <h3>example</h3> 이런식으로 들어있는 경우)

 

두 개를 같이 써주셔야하는 이유와 dompurify 설치 방법은 아래에 포스팅 해놓았습니다.

https://record22.tistory.com/100

 

4. 배열 접근

{t("header.subMenu.company.2")}

마지막으로 객체의 배열에 접근할 때는 위와 같이 접근해주시면 됩니다.

그러면 화면에 출력되는 한국어 결과는 "예시"가 되고,

영어로 바뀌었을 때의 결과는 example이 되겠죠!

 

 

https://m.blog.naver.com/PostView.naver?blogId=varkiry05&logNo=221853269007&proxyReferer=https:%2F%2Fwww.google.com%2F 

https://velog.io/@hyounglee/TIL-80

 

https://react.i18next.com/getting-started

https://i18next.github.io/i18next/pages/sample.html

https://stackoverflow.com/questions/57691637/react-i18next-why-arent-my-nested-keys-working