[React] 다국어 처리하기 - i18n 사용하기

 

 

◾ i18n 시작하기

 

웹사이트 혹은 어플리케이션에 다양한 언어를 적용하기 위해 사용하는 라이브러리다. 

아래의 공식 웹 페이지를 보면 더 많은 이야기를 확인할 수 있다. 간단하게 어떻게 사용하는지만 정리해 볼 예정이다.

 

공식 웹페이지 👉 https://react.i18next.com/getting-started

 

 

설치하기

npm install react-i18next i18next --save

 

 

◾ 적용하기

보통 파일 하나에 다 적은 간단한 예제들이 많아서 조금 헤맸는데, 우선 대부분 프로젝트에 적용할 때 파일을 따로 빼서 분리해두기 때문에 나도 그렇게 했다. src 폴더 아래에 language 라는 폴더를 만들어서 i18n.js를 만들었다. 

 

영어버젼하고 한국어 버젼만 있으면 되기때문에 번역 스크립트는 en.json / kr.json으로 분리해두었다. 

 

 

i18n.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "./en.json";
import kr from "./kr.json";

const resource = {
  en: {
    translation: en,
  },
  kr: {
    translation: kr,
  },
};
i18n.use(initReactI18next).init({
  resources: resource,
  lng: "kr",
  fallbackLng: "kr",
  debug: true,
  keySeparator: false,
  interpolation: { escapeValue: false },
});

export default i18n;

resource 부분에 더하고 싶은 언어들을 더해주면 된다. translation에 적힌 kr과 en은 json 파일이다.  

init 부분에 들어가있는 건 default 값으로 쓰고 싶은 언어다. 

저기에 옵션을 더 넣어줄 수 있는데, 'ns'라고 공간으 나뉘어주는게 있다. 하지만 난 딱히 필요없어서 생략!

 

 

 

kr.json

{
    "title1" : "나는 Netflix Original Series에 대해서 얼마나 알고 있을까?",
    "title2" : "나의 덕력은?!",
    "title3" : "{{people}}명의 사용자가 플레이했습니다.",
    "scoreTtitle" : "Netflix Original Series 퀴즈에 대한",
    "score" : "{{name}} 님의 점수는",
    "yourscore" : "점 입니다!",
    "comment" : "한 마디 남기기",
    "leaveComment" : "{{name}} 에게 남기는 한마디",
    "checkRank" : "랭킹 보러가기",
    "ranktitle" : "{{people}} 명 중에 당신의 랭킹은?",
    "rank" : "등",
    "retry" : "재도전하기"
}

이건 한국어 버젼이지만 이것과 똑같이 영어버젼도 en.json으로 만들어주면 된다. 중간에 {} 괄호 처리가 된 것은 변수로 데이터를 받아서 적용할 예정이기 때문~~

 

 

 

 

이렇게 코드를 작성해주고는 이제 넘어가서 코드를 적용시켜주면 된다!

 

적용할 페이지.js

import React, { useRef, useEffect } from "react";
import i18n from "i18next";
import { useTranslation, Trans } from "react-i18next";


const Start = () => {
  const { t } = useTranslation();
  const people = userInfo.length;

  return (
    <Wrapper>
      <Lng>
        <button onClick={() => {i18n.changeLanguage("en")}}>ENG</button>
        <button onClick={() => {i18n.changeLanguage("kr")}}>KOR</button>
      </Lng>
      <Title>
        <Trans i18nKey = "title1">
          hello
        </Trans>
        <p>{t("title2")}</p>
        <p>{t("title3", { people })}</p>
      </Title>
      
      ///생략...

 

실제로 적용했던 코드인데, 많은 부분을 지워내고 i18n을 적용한 부분만 남겨둔 일부다. 

Trans 라는 컴포넌트를 써서 key로 값을 가져와서 적용할 수 있고, 

useTranslation을 사용해 t로 값을 가져와서 적용 할 수 있다. 

Trans의 경우에는 저 hello 값이 kr 상태의 default 이고 en을 누르면 title1에 해당하는 영어 값으로 바뀐다. 

{ people } 이라는 변수는 해당 컴포넌트에서 선언해준 값으로 en이여도 kr이여도 변함없이 나온다. 

 

 

그리고 제일 중요한거!!!!!!

 

index.js에서 꼭!! i18n.js을 import 해줘야한다. 이거 안 해서 ㅠㅠ... 코드 잘 못 써서 안되는 줄... ㅠㅠ