리액트 타입스크립트 다국어 설정 i18next

https://react.i18next.com/getting-started

Getting started | react-i18next documentation

 

1. 리액트 프로젝트 폴더 내에서

npm install i18next react-i18next

 

2. src 안에 locales 폴더를 만들고 그 아래 각각 en, ko 폴더를 만든다. 각 폴더에 translation.json 를 만든다.

 

3. translation.json 안에 아래처럼 언어별로 라벨에 사용될 단어들을 정의

{
    "header": {
      "mypage": "My page",
      "logout": "Sign Out",
      "login": "Sign In",
      "register": "Sign Up",
      "language": "Languages",
      "help": "Help"
    },
    "nav": {
      "dashboard": "Dashboard",
      "shopping-mall": "Shopping Mall"
    }
  }

 

{
    "header": {
      "mypage": "마이페이지",
      "logout": "로그아웃",
      "login": "로그인",
      "register": "회원가입",
      "language": "언어설정",
      "help": "고객센터"
    },
    "nav": {
      "dashboard": "대시보드",
      "shopping-mall": "쇼핑몰 관리"
    }
  }

 

4. 한국어, 영어 각각 json 파일 안에 내용물을 채운 후, locals 안에 i18n.ts 파일을 만든다.

i18n 안의 체이닝 옵션들은 홈페이지를 참고해서 하나씩 확인.

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

const resources = {
  en: {
    translation: translationEN
  },
  ko: {
    translation: translationKO
  }
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: "ko", 
    fallbackLng: "en",
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

 

5. 이제 본격적으로 페이지에 적용해본다.

function App() {
  return (
    <div>
      <h1>Hello React(TypeScript)</h1>
      <I18n/>
    </div>
  );
}

 

 

I18n 이란 컴포넌트는 아래와 같다.

import React from 'react';
import { useTranslation } from "react-i18next";
import i18n from "locales/i18n";

const I18n = () => {
    
    const { t } = useTranslation();

    console.log("언어 설정 정보 ", i18n.language);

    return (
        <div>
            <h2>다국어 설정 테스트</h2>
            <h3>{t('header.language')}</h3>
            <h3>{t('header.help')}</h3>
            <h3>{t('nav.dashboard')}</h3>
            <h3>{t('nav.shopping-mall')}</h3>
        </div>
    );
};

export default I18n;

 

랜더링 결과는

 

json으로 파일을 읽어들여서 다국어 설정을 해봤다.

백단을 스프링 부트로 하고 메세지 또는 라벨을 Database에서 일겅 들여 캐쉬를 거쳐 불러들이는게 의미가 있을까? 어차피 node라 서버에서 수정해도 바로 적용이 될텐데 말이다. 고민이된다.