[React] i18next

i18n은 internationalization 의 약자로 i와 n사이에 18글자가 들어있기 때문에 i18n이라고 한다.

i18n은 어플리케이션을 다양한 언어에 쉽게 적용할 수 있도록 하는 개발 프로세스이다.

각 특정 로케일에 대해 다시 개발을 할 필요 없이 전 세계 사용자가 동일한 어플리케이션을 사용할 수 있도록 한다.

예를 들면 홈페이지의 영문버전, 한글버전이 그 예이다.

 

React에서는 이를 지원해주는 i18next라는 라이브러리가 있다.

1. i18n 세팅

src폴더에 아래와 같은 폴더들을 만들어준다.

// i18n/index.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "./locales/en";
import ko from "./locales/ko";

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources: {
      en,
      ko,
    },
    lng: "en",
    fallbackLng: "en",
    ns: ["home"],
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

2 . en, kr json 생성

// i18n/locales/en/home.json
{
  "1": "english",
  "2": "hello",
}

// i18n/locales/ko/home.json
{
  "1": "한글",
  "2": "안녕",
}

3. en, kr index.js 설정

// i18n/locales/en/index.js

import home from "./home.json";
const en = {
  home
};

export default en;

// i18n/locales/ko/index.js

import home from "./home.json";
const ko = {
  home
};

export default ko;

4. 쓰고 싶은 컴포넌트에서 사용

import React from "react";
import { useTranslation } from "react-i18next";
import {TextBox1} from "./style";
const Com1 = () => {
  const { t } = useTranslation("home");
  return (
      <TextBox1>
        <span>{t("1")}</span>
        <span>{t("2")}</span>
      </TextBox1>
  );
};

export default Com1;

useTranslation 으로 ns를 불러오고 t("키값")을 넣어주면 쓸수 있다.

 

여기서 onClick 이벤트를 넣어 언어를 바꾸는 기능은 다음과 같다.

import React from "react";
import { useTranslation } from "react-i18next";
import {TextBox1} from "./style";
import i18n from "i18n";

const Com1 = () => {
  const changeLanguageHandler = () => {
    let toChangeLang = i18n.language === "en" ? "ko" : "en";
  	i18n.changeLanguage(toChangeLang);
  };
  const { t } = useTranslation("home");
  return (
      <TextBox1 onClick={changeLanguageHandler}>
        <span>{t("1")}</span>
        <span>{t("2")}</span>
      </TextBox1>
  );
};

export default Com1;

현재 언어를 받아오는 i18n.languate 를 통해 언어를 받아온 후

changeLanguage 메소드를 이용하여 바꾸면 된다.