[React-i18next] 웹페이지에 다국어 적용하기 (with: typescript)

현재 개발중인 웹페이지는 한국은 물론이고 영어권, 중국, 일본까지 사용자를 가지고 있다.

한국어, 영어, 중국어, 일본어를 모두 웹페이지에 그려내야한다.

어떻게 할 수 있을까?

 

React-i18next

다국어 처리를 해주는 라이브러리이다. 
react-i18next는 React 애플리케이션에서 다국어 지원을 제공하는 i18next 라이브러리의 React 바인딩이다.

https://react.i18next.com/

Introduction - react-i18next documentation

 

React-i18next 사용법

1.  initReactI18next로 세팅

src > utils > i18n > i18n.ts

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

import en from "./lang/en.json";
import jp from "./lang/jp.json";
import cn from "./lang/cn.json";
import ko from "./lang/ko.json";

const resources = {
  en: {
    translation: en,
  },
  ko: {
    translation: ko,
  },
  cn: {
    translation: cn,
  },
  jp: {
    translation: jp,
  },
};

const userLanguage = window.navigator.language;

i18n.use(initReactI18next).init({
  resources,
  // lng: localStorage.getItem("language") || userLanguage || "en",
  lng: "en",
  fallbackLng: "en",
  keySeparator: false,
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

export const languages = ["en", "ko", "cn", "jp"] as const;
export type Languages = (typeof languages)[number]; // 'en' | 'ko'

lng는 초기 언어를 설정해주고

fallbackLng는 지원되지 않는 언어가 요청되면 사용할 기본 언어를 설정해준다.

resources는 번역 데이터를 나타낸다.

src > utils > i18n > lang > en.json

{
  "MyAssets": "My Assets",
  "Refresh" : "Refresh",
  "TotalValue": "Total Value",
  "SeeDetail": "See detail",
}

src > utils > i18n > lang > ko.json

{
  "MyAssets": "나의 현황",
  "Refresh" : "새로고침",
  "TotalValue": "보유자산 현황",
  "SeeDetail": "자세히 보기",
}

 

 

2. index.tsx

꼭!!! index.tsx에서 위에서 작성한 i18n를 import 해주어야한다.

 

import "./utils/i18n/locales/i18n";

import React from "react";
import ReactDOM from "react-dom/client";
import { StyledEngineProvider } from "@mui/styled-engine";
import { QueryClient, QueryClientProvider } from "react-query";
import { RecoilRoot } from "recoil";

import App from "./App";
import "./utils/i18n/locales/i18n";

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <QueryClientProvider client={queryClient}>
    <StyledEngineProvider injectFirst>
      <RecoilRoot>
        <App />
      </RecoilRoot>
    </StyledEngineProvider>
  </QueryClientProvider>
);

내가 이 부분을 안해서 몇시간동안 알 수 없는 에러를 잡고 있었다...

react::18next:: You will need to pass in an i18next instance by using initReactI18next

 

 

3. 컴포넌트에서 사용하기

useTranslation훅을 사용하여 i18n 번역 함수를 가져올 수 있다.

import { useTranslation } from "react-i18next";


function Page() {
    const { t } = useTranslation();

    return ( <div>{t("Refresh")}</div> )
}

{t("Refresh")} 이런식으로 사용해주자.

 

 

4. 언어 변경하기 

i18n.changeLanguage함수를 사용할 수 있다.

import { useTranslation } from "react-i18next";

function GlobalMenu() {
  const { i18n } = useTranslation();
  
   const handleChangeLanguage = (lang: string) => {
    i18n.changeLanguage(lang);
  };

	return (
   	 <ul>
    	<li onClick={() => handleChangeLanguage('ko')}>한국어</li>
        <li onClick={() => handleChangeLanguage('en')}>영어</li>
     </ul>
    )
}