react-i18next 다국어 처리

i18n

- 공식문서 : https://www.i18next.com/

- 다국어 지원을 위한 JavaScript 라이브러리

 

 

react-i18next

- 공식문서 : https://react.i18next.com/

- React / React Native에서 i18n을 사용하기 위한 라이브러리

 

- 설치

# npm
$ npm install react-i18next i18next --save

 

 

기본 사용법

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguaeDetector from "i18next-browser-languagedetector";

i18n
  .use(LanguaeDetector)  // 사용자 언어 탐지
  .use(initReactI18next) // i18n 인스턴스를 react-i18next로 전달
  .init({
    fallbackLng: "ko",
    interpolation: {
      escapeValue: false
    },
    resources: {
      en: {
        translation: {
          "hello": "Hello"
        }
      },
      ko: {
        translation: {
          "hello": "안녕"
        }
      },
    }
  });


function App() {
  const { t } = useTranslation();
  return <h2>{t('hello')}</h2>;
}

 

 

useTransaction()

- Hook

- t 함수와 i18n 인스턴스를 불러온다.

- const { t, i18n } = useTranslation();

- 참고) https://react.i18next.com/latest/usetranslation-hook