패스트캠퍼스/자습

react에서 다국어지원 기능 구현하기( i18n , i18next)

sunnykim91 2020. 4. 17. 14:33

회사에서 프로젝트를 하면서 다국어를 지원할 일이 있어서 여러가지 구글링을 통해 알아보았다. 

그중에서 i18next라고 어떻게 읽는지는 모르겠지만...일단 써보자하고 써봣는데 된다... 신기하다 바로 번역해주는것이 아니라

내가 json파일형태로 등록해놓은것을 예를들어 한국어로는 'hello' : 안녕, 영어로는 'hello': 'hello'라고 등록해놨을때 

홈페이지 영어로보기 ! 누르면 hello가 나올 것이고, 한국어로보기! 누르면 안녕이 나올 것이다.

 

그럼 이것을 어떻게 하는지 살펴보자!

 

먼저 리액트와 패키지매니저는 yarn을 사용하기 때문에 나는

 

yarn add react-i18next

 

로 설치해 주었다.

 

그리구 나서 파일을 하나 만들고 파일이름은 나는 i18n.tsx 로 만들었다. (타입스크립트를 사용하기 때문에!)

 

그리고 안에 내용은 

 

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translationEn from "./translation.en.json";
import translationKo from "./translation.ko.json";
import translationJp from "./translation.jp.json";

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

export default i18n;

ㅇ이렇게 해주었다.

 

en은 영어고 kr은 한국어고 jp는 일본어다..(이정도는?)

따로 json파일로 빼주어도 되고 양이 많지 않다면 바로 객체 형태로 써주어도된다!!

const resource = {
  en: {
    translation: translationEn,
  },
  kr: {
    translation: {
      hello: "안녕",
      bye: "잘가",
    },
  },
  jp: {
    translation: translationJp,
  },
};

대략 한국어를 보면 이런식으로? 여튼

 

json파일을 각각 만들어주면 좋다! 언어별로 뭔가 파일을 따로따로 관리할 수 있으니까~~

 

자 이렇게만 만들어놓고 바로 사용하려고 해보자!

 

따로 app이나 index에서 설정할 거는 없고 우리가 항상 react에서 마지막줄에 쓰는것을 생각해보자

 

export default 컴포넌트이름

이렇게 쓰는것을

 

export default withTranslation()(컴포넌트이름) 

 

이렇게 바꿔주면 된다.

 

물론 당연히 import를 해야겠지?

 

두가지를 import를 해야하는데

import { withTranslation } from "react-i18next";
import i18n from "../../lang/i18n";

요렇게 하면된다.

 

자 이제 메소드를 조금 알아보자 

 

우리가 아까 i18n.tsx파일에서 보면 kr로 lng을 설정해놓았기 때문에 기본값은 kr 즉 한국어로 페이지가 나올것이다.

 

여기서 첫번째 현재 내가 쓰고있는 언어가 무엇인가를 알 수 있는 메소드!?

 

i18n.language

이렇게 하면 내가 지금 언어가 어떤건지 알 수 있다 치면 kr이 나오겟지?

 

그럼 이제 언어를 어떻게 바꾸나?

i18n.changeLanguage('en') 혹은 i18n.changeLanguage('jp')

이런식으로 쓰면 영어로 혹은 일본어로 바꿀 수 있다.

 

자 내가 위에서 같은 'hello'를 영어로는 'hello' 한국어로는 '안녕' 일본어로는 '곰방와' 라고 해놨다고 하면은

en으로 바꾸는 event가 발생하면 한국어로 되어있던 안녕이 hello로 바뀌는 것을 볼 수 있을 것이다.

 

자 그럼 이제 이것을 화면에는 어떻게 보여줄 것인가이다.

 

i18n.t('hello')

이렇게 하면 보여진다. 간단하다.

 

또 하나의 팁 ? 

 

i18n 개행 , 즉 br을 어떻게 처리할지 이다.

뭐 그럴일이 나 말고 다른사람들도 있을지 모르겠지만, 예를들어 번역해놓은 글이 엄청 긴데 \n 을 통해서 해보려고 해봤지만 엔터는 먹히지 않고 한줄에만 써졋다..젠장 왜그러지 ㅜㅜ 그러다가 엄청난 구글링의 시간을 통해서 알아내었다.

 

{
  "hello": "안녕",
  "aaa": "The moment you meet with experience, knowledge, insight and \n courage of the Master’s nobody taught, your dream is at ViBLE.",
 }

중간에 보면 \n이 들어가있다. 보통은 \n을 개행으로 인식해서 한줄이 띄어져야하는데 이건 띄워주지 않았따....ㅠㅠ 

 

그래서 이것을 처리하기 위해서 불러올때 이렇게 처리했다.

 

{i18n.t('aaa').split("\n").map((line)=>(<div>{line}</div>))}

split을 통해서 개행 이전과 이후를 잘라서 배열로 만들어 그것을 하나씩 출력하는 방법이다...(이래서 알고리즘을 잘해야하나..ㅋㅋㅋ )

 

여튼 이런식으로 하면 이문제도 해결!

 

 

 

 

궁금한것은 댓글로 문의주면 친절하게 답변드리겠습니다. ^^

 

반응형