[React] react에서 react-i18next를 이용한 다국어지원 기능 구현하기

개요

회사에서 5년 된 프로젝트를 리뉴얼하고 새로운 기능들을 도입할 때 다국어를 지원할 일이 있었다.

이때 복수형 처리, 날짜 및 시간 형식 지원, 숫자 형식 지원 등 다양한 기능들이 제공되고 다국어 지원 기능을 개발할 때 많이 사용되는 react-i18next 라이브러리를 사용는데 이때의 경험을 정리하고자 한다.

시작하기

자세한 설명은 공식 홈페이지를 참고하면 좋다.

패키지 설치

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

패키지를 설치 한 후 i18n 폴더를 생성해야 한다.

폴더 구조는 사람마다 다르게 구성할 수 있다.

중요한 점은 i18n의 폴더를 따로 분리하고 그 안에 설정할 index.js 파일과 en, ko, ja 등 지원할 언어 json 파일을 구성하면 된다.

en.json

json 구성은 아래와 같다.

{
    "verify-modal-title": "A verification email has been sent.",
      ...
}

index.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

import langEn from './en.json';
import langKo from './ko.json';
import langJa from './ja.json';

const resources = {
  en: {
    translation: langEn,
  },
  ko: {
    translation: langKo,
  },
  ja: {
    translation: langJa,
  },
};
i18n.use(LanguageDetector).use(initReactI18next).init({
  resources,
  lng: 'en',
});
export default i18n;

index 파일 안에 따로 구성한 json 파일을 불러오고 resources로 설정해 주면 된다.
i18n.use의 lng 설정 같은 경우는 기본 언어 설정으로 사용자의 언어와 맞는 언어가 없을 경우 보이게 되는 언어를 설정한다.

사용하기

원하는 페이지에서 사용하기 전 파일 최상단의 index.jsx 파일에 i18n 폴더를 불러오면 된다.

import 'Assets/i18n';

각각의 컴포넌트에서 사용하려면 useTranslation을 import하고
아래와 같이 사용하면 된다.

import { useTranslation } from 'react-i18next';

...

const { t } = useTranslation();

...
<span>{t('sign-in-social-text')}</span>

언어 변경하기

개발자가 언어별 번역이 잘 되는지 test 하거나, 꼭 영어로 보여줘야 하는 페이지 등 언어를 변경해야 할 때가 있다.

그럴때는 i18n에서 제공하는 changeLanguage 메소드를 사용하면 된다.

const setDisplayLanguage = () => {
    const myLanguage = 원하는 언어 설정; // @NOTE: 예시
    switch (myLanguage) {
      case 'en-US':
        i18n.changeLanguage('en');
        break;
      case 'ko-KR':
        i18n.changeLanguage('ko');
        break;
      case 'ja-JA':
        i18n.changeLanguage('ja');
        break;
    }
  };

i18n에서 줄바꿈 처리

사실 이 부분을 작성하려고 이 글을 시작했다.
그전에 사용했던 react-intl 같은 경우 줄바꿈 처리를 하려면 string에
을 넣고 FormattedHTMLMessage를 불러와 사용했지만,
i18n의 경우 비슷한 방법을 찾지 못했다.

그렇게 구글링 끝에 아래와 같은 방법같이 \n을 기준으로 분리하는 함수를 만들어 사용하는 방법들을 찾을 수 있었다.

{i18n.t('aaa').split("\n").map((line)=>(<div>{line}</div>))}

그러던 중 p 태그를 사용할 때 white-space: pre-line 를 사용하지 않으면 \n 사용이 안 된다는 사실을 떠올리게 되었고, 혹시나 하는 마음에 p tag를 설정하고 번역 string에 \n을 사용했더니 잘 작동한다....

그렇다, 사실 쉬운 문제였지만 구글링한 시간과 고민한 시간이 아까워 글을 쓰게 되었다.

혹시나 같은 문제를 고민하고 있다면, 이 글을 보고 시간을 아꼈으면 한다...