언어 전환기 만들기

번역 버튼 생성

App.js

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

const lngs = {
  en : { nativeName : "English"},
  kr : { nativeName : "Korean"}
}

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

  return (
    <div className="App">
      <div>
        {Object.keys(lngs).map((lng) => (
          <button 
            type="submit" 
            key={lng} 
            onClick={() => i18n.changeLanguage(lng)} 
            disabled={i18n.resolvedLanguage === lng}
          >
            {lngs[lng].nativeName}
          </button>
        ))}
      </div>
      <Trans i18nKey="description">
        Edit <code>src/App.js</code> and save to reload
      </Trans>
      <br/>
      {t('learn')}
    </div>
  );
}

export default App;

onClick : i18n.changeLanguage(lng) 버튼 클릭시 설정언어 변경
disabled : 현재 설정된 언어와 같을 경우 버튼 비활성

i18n.js

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',
                description : 'Edit <1>src/App.js</1> and save to reload'
            }
        }, 
        kr : {
            translation : {
                learn : '리액트 i18n 배우기',
                description : '<1>src/App.js</1> 수정 및 저장'
            }
        }
    }
})

languageDetector : 브라우저의 언어를 감지하여 초기에 한국어로 자동 설정이 된다.

로컬스토리지에 i18nextLng : kr 로 저장됨