[React/Typescript] i18next로 다국어 지원/구현하기

1. 라이브러리 설치

yarn add i18next @types/i18next react-i18next @types/react-i18next

 

2. 폴더구조 참고

./src
├── index.tsx
├── app.tsx
└── assets
            └── lang
                        ├── i18n.ts
                        └── lang_packs
                                    ├── en.json
                                    └── ko.json

 

3. i18n.ts 작성

 

src/assets/lang/i18n.ts

import i18n from 'i18next'; 
import { initReactI18next } from 'react-i18next';
import langEn from './lang_packs/en.json';
import langKo from './lang_packs/ko.json';

const resources = {
  en: { translation: langEn },
  ko: { translation: langKo },
}

const userLanguage = window.navigator.language; 

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

export default i18n;

export const languages = [ 'en', 'ko' ] as const;
export type Languages = typeof languages[number];

 

4. 언어팩 json으로 작성

 

src/assets/lang/lang_packs/ko.json

{
  "title": "제목",
  "description": "내용입니다.",
  "language_en": "English",
  "language_ko": "한국어"
}

src/assets/lang/lang_packs/en.json

{
  "title": "Title",
  "description": "Description",
  "language_en": "English",
  "language_ko": "한국어"
}

 

5. 사용하기

import { useTranslation } from 'react-i18next';
import { Languages, languages } from "../assets/lang/i18n";

const App: React.FC = () => {

  const { t, i18n } = useTranslation();
  
  const handleChangeLanguage = (lang: Languages) => {
    localStorage.setItem("language", lang); // 로컬 스토리지에 저장할 경우
    i18n.changeLanguage(lang);
  };

  return (
      <div className="app">
      
          <p>{t('title')}</p>
          <p>{t('description')}</p>
          
          {/* 언어 바꾸기용 버튼 */}
          {languages.map(lang => (
            <button key={lang} onClick={() => handleChangeLanguage(lang)}>
              {t(`language_${lang}`)}
            </button>
          ))}
          
      </div>  
  );
}

export default App;

 

6. 결과