React i18n-next를 이용한 다국어 처리

국제화할 수 있는 react i18n-next (i18next is a very popular internationalization framework for browser or any other javascript environment)를 다국어 처리를 위해 사용해보았다. 공식문서가 잘 되어 있어서 큰 어려움 없이 사용할 수 있었다. 그래서 오늘은 i18n-next에서 내가 기억하고 싶었던 부분을 정리해보겠다. 

 

 

 

---

 

 

✔️ 폴더 분리

가장 먼저 폴더를 분리해줘야 한다. 언어는 locales폴더명을 사용하기에 src -> locales -> en, kr로 폴더를 분리해 해당 언어에 맞는 json 파일을 만들었다.

 

 

✔️ init options

각 언어의  json 파일이 준비되고 init을 해주면 된다. init 옵션들은 여러 가지가 있는데 내가 사용한 것을 위주로 기록하려 한다. 

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import translationKo from "locales/ko/translationKo";
import translationEn from "locales/en/translationEn";

export default i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    debug: true,
    fallbackLng: "ko",
    detection: { order: ["path", "navigator"] },
    // interpolation: { // not needed for react!!
    //   escapeValue: false,
    // },
    resources: {
      ko: {
        translation: translationKo,
      },
      en: {
        translation: translationEn,
      },
    },
  });

 

LanguageDetector : 

i18next language detection plugin use to detect user language in the browser.

Language Detector는 플러그인 옵션으로 유저가 브라우저에서 어떤 언어를 쓰고 있는지 찾는 플러그인이다. (이외에도 cache, backend 옵션이 있다.) 다양한 detector option들이 있으며 여기서 살펴볼 수 있다. 나는 이 중에서 order 옵션만을 사용했다. order도 navigator, querystring 등 선택할 수 있지만 나는 'path (ex. http://my.site.com/LANGUAGE/...)'가 1순위로, navigator(set browser language)를 2순위로 언어를 detect 하도록 설정하였다. 

 

 

debug : 

logs info level to console output. Helps finding issues with loading not working.

말그대로 어디서 안 되는지 알 수 있게 보여주는 옵션이다. default는 false이고 나는 true로 놓고 사용하였다. 

 

 

fallbackLng : 

language to use if translations in user language are not available. Setting it explicitly to false will not trigger to load the fallbackLng at all.

유저의 언어세팅이 작동하지 않을 때 사용할 언어를 설정해주는 옵션이다. 나는 영어로 설정해주었다. 

 

 

resources : 

resources to initialize with (if not using a backend plugin or not using addResourceBundle.)

나는 프론트엔드로만 개발했기에 프론트에서 JSON 파일을 가져와서 resources에 제공하였다. 또한 namespace를 사용해 처리할 수도 있다. namespace를 사용한다면 useTranslation과 t function을 사용할 때 namespace의 key에서 골라 사용해야 한다. 자세한 것은 공식문서의 예제를 보면 금방 이해할 수 있을 것이다. (링크)

 

 

interpolation : 

많은예제에서 interpolation을 사용하여서 찾아보니 react에서는 필요하지 않다. 이미 디폴트로 설정이 되어 있는 옵션이기 때문이다. 

 

 

나는 이렇게 기본적인 것만 사용했고, 이외에도 Lng(language to use (overrides language detection). languageDetector를 사용할 경우 사용하면 안 된다. ) 등 다양한 옵션들이 있어서 자신의 프로젝트에 맞는 옵션들을 사용하면 된다. 그리고 아래 코드처럼 최상위 Index.js파일에 이 파일(나의 경우 i18n.js)을 번들링을 위해 import 해주어야 한다.

 

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
//needs to be bundled!!
import "./i18n";

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


reportWebVitals();

 

 

✔️API

init과 use또한 API지만 위에 함께 설명했기에 내가 사용한 두 가지만 더 작성하고 넘어가겠다.  API 또한 공식문서에 잘 나와 있다! 👍🏻

 

i18n.changeLanguage('language') : 

언어를 변환해주는 함수이다. 

 

i18n.language : 

실시간 제공되는 언어 타입을 볼 수 있다.

 

 

✔️ t function과 useTranslation

 

t function은 t('resource key') 형태로 언어 리소스 key를 입력하면 해당 언어값 출력해준다. useTranslation() 은 함수형 컴포넌트에서 t function 과 i18n 인스턴스를 사용할 수 있게 해주는 훅이다. 이를 사용해 아래와 같이 버튼을 클릭했을 때 해당 언어로 변경해주는 코드를 구현할 수 있다. 

import React, { useState } from "react";
import { useTranslation } from "react-i18next";

function Button() {
  const { i18n, t } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div className="container">
      <div>
          <div>
            <div>
              <button onClick={() => changeLanguage("ko")}>KO</button>
            </div>
            <div>
              <button onClick={() => changeLanguage("en")}>EN</button>
            </div>
          </div>
        {/* 버튼 테스트 */}
        <div>{t("language")}</div>
      </div>
    </div>
  );
}

export default Button;

 

나는 번역될 json 파일에 아래와 같이 language 키를 만들어 놓았기에 위의 버튼이 눌릴 때 t function의 language가 잘 작동한다.

 

//ko.json
{
  "language": "한국어",
}

//en.json
{
  "language": "English",
}

 

 

✔️ resourses, translation 주의!

translation 할 파일의 이름들을 한 번 바꾸면서 resources부분의 이름도 변경해주었는데 갑자기 적용이 안되었다. 

 

 

그래서 콘솔을 보니 위처럼 나와서 다시  resorurces부분을 보니 translation키가 빠져서 그런 것을 발견했다. 단순실수여도 중요한 부분이므로 정확히 체크하도록 해야겠다. 

 

왼쪽 -> 오른쪽으로 변경

 

 

✔️ Trans component

공식문서 예제에 Trans 컴포넌트가 있어  찾아보았다. 

While <Trans> gives you a lot of power by letting you interpolate or translate complex React elements, the truth is: in most cases you don't even need it.
As long you have no React/HTML nodes integrated into a cohesive sentence (text formatting like strong, em, link components, maybe others), you won't need it - most of the times you will be using the good old t function.
You may be looking directly for theTrans props.

 

설명은 위와 같고, 즉 Trans component는 대부분의 경우에서 필요하지 않지만 복잡한 리액트 구조에서 번역을 해야 할 때, 위의 경우에 사용하는 것이었다. 보통은 t function으로 충분히 구현 가능하다. ( 참고 링크 )

 

 

---

 

 

예전부터 빨리 해보고 싶던 작업이어서 재밌었고, 아직 한국어보다 영어로 된 자료가 많아서 다시 한번 영어의 중요성을 느끼며... 마무리하겠다..! 😋✨