i18n 초기 설정

프로젝트 세팅

1. react 프로젝트 설정

npx create-react-app <프로젝트 이름>

2. 의존성 설치

//npm
npm i i18next react-i18next i18next-browser-languagedetector
>
//yarn
yarn add i18next react-i18next i18next-browser-languagedetector

3. i18n 파일

src 디렉토리에 i18n.js 파일 생성

적용

1. i18n 설정 파일

import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from 'i18next-browser-languagedetector' //언어 감지기

i18next
    .use(initReactI18next)
    .use(LanguageDetector)
    .init({
    debug: true,
    fallbackLng : 'en',
    resources : {
        en : {
            translation : {
                learn : 'learn react-i18next'
            }
        }
    }
})

2. index.js 파일 설정

import './i18n'

3. useTranslation Hook

App.js

import './App.css';
import { useTranslation } from 'react-i18next';

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

  return (
    <div className="App">
      {t('learn')}
    </div>
  );
}

export default App;

4. 프로젝트 구동

//npm
npm run start

//yarn
yarn start

learn key로 설정해둔 언어가 보여지는걸 알 수 있다.

description 의 경우 정의되어 있지않아 key값이 리턴

debug : true 설정으로 missingKey 오류 보여줌