[TIL] 다국어 처리 react-i18next

이번 프로젝트는 외국인 유저도 있을 거로 생각했기 때문에, 다국어 처리를 하게 되었다. 다국어 처리는 react- i18next를 이용해서 진행했다.

먼저, language 폴더를 하나 생성해서 그 안에 i18n.js 파일과 각 언어 별 json 파일을 만들어 주었다.

{
  "language": "언어"
}

{
  "language": "言語"
}

{
  "language": "Language"
}

언어 파일은 이런 식으로 "key값" : "대치 될 단어 또는 문장"으로 만들어준다.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import translationEn from './translation.en';
import translationKo from './translation.ko';
import translationJa from './translation.ja';

const resource = {
  en: {
    translation: translationEn,
  },
  ko: {
    translation: translationKo,
  },
  ja: {
    translation: translationJa,
  },
};

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources: resource,
    lng: 'en', // 초기 설정 언어
    fallbackLng: 'en',
    ns: ['translation'],
    defaultNS: 'translation',
    debug: true,
    keySeparator: false, // we do not use keys in form messages.welcome
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

export default i18n;

i18n.js 파일은 튜토리얼을 참고해서 작성했다. 초기 설정 언어는 영어로 했다. 만든 파일은 index.js에 import 해준다.

import './shared/language/i18n';

이번 프로젝트에서는 Header에서 언어 설정을 할 수 있는 탭을 만들어서 변경될 수 있도록 했다.

import { useTranslation } from 'react-i18next';

Header에서 이렇게 useTranslation을 import 하고, 언어 변경을 할 함수를 작성한다.

const { i18n } = useTranslation();
  const changeLanguageEn = () => {
    i18n.changeLanguage('en');
  };
  const changeLanguageKo = () => {
    i18n.changeLanguage('ko');
  };
  const changeLanguageJa = () => {
    i18n.changeLanguage('ja');
  };

각 함수를 onClick 시 실행할 수 있도록 해주면 된다. 그런데 이렇게 했을 때, 페이지가 변경되는 경우 다시 초기 언어로 돌아오는 경우가 있어서 설정된 값을 localStorage에 저장해주었다.

const { i18n } = useTranslation();
  const changeLanguageEn = () => {
    i18n.changeLanguage('en');
    localStorage.setItem('language', 'en');
  };
  const changeLanguageKo = () => {
    i18n.changeLanguage('ko');
    localStorage.setItem('language', 'ko');
  };
  const changeLanguageJa = () => {
    i18n.changeLanguage('ja');
    localStorage.setItem('language', 'ja');
  };

그러면 이제 노가다 시작이다!

  const { t } = useTranslation();
  <p>{t('language')}</p>

이렇게 { t }를 선언해주고, t('key값') 이런 식으로 모든 텍스트를 대치시켜주면 된다.