[React] React에서 다국어 지원 기능 구현하기

 

 

 

회사 웹사이트를 해외에서 접근했을 시 영문으로 보여지게 해야하는 피쳐가 있어서 다국어 지원 기능에 대해 알아보았었다. 

1. i18n이란?

i18n이란 국제화의 약자로 i와 n사이에 18글자가 있기 때문에 이렇게 표기한다. 쿠버네티스를 k8s로 표현하는 것과 비슷한 표기법이다. 
SW제품이나 서비스를 여러 언어와 지역화에 대응할 수 있는 프로세스를 말한다. 
일반적으로 다음 같은 기능을 포함하는데 문자열 치환, 다국어 지원, 날짜/시간/통화 형식, 텍스트 정렬방식에 대한 대응이 나라나 지역, 언어에 따라 달라질 수 있다. 

 

2. React에서 i18n 라이브러리 사용하는 방법

i18n-next 공식문서 참고

https://react.i18next.com/

 

npm 또는 yarn으로 i18next, react-i18next 라이브러리를 설치해준다. 

npm install i18next react-i18next --save

 

3. JSON 리소스 준비하기

다국어지원을 하기 위해서는 각 단어, 문장에 대응되는 언어의 리소스가 필요하다. 해당 문자열에 맞게 예를 들면 한국어 단어에 매칭되는 영문 단어가 필요한 것이다. 이러한 리소스들은 JSON 형태로 만들어서 애셋으로 저장한다. 

ko.json

{
	"LION": "사자"
}

en.json

{
	"LION": "Lion"
}

4. i18n 초기화하기

앱 진입점이 되는 index.js 또는 App.js에서 i18n 설정을 초기화 해주는 코드를 추가한다. 

// index.js 또는 App.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import i18n from 'i18next';
    import { initReactI18next } from 'react-i18next';
    import LanguageDetector from 'i18next-browser-languagedetector';

    i18n
      .use(initReactI18next)
      .use(LanguageDetector)
      .init({
        resources: {
          en: { translation: require('./locales/en.json') },
          ko: { translation: require('./locales/ko.json') }
        },
        fallbackLng: 'en',
        debug: true,
        interpolation: {
          escapeValue: false // not needed for React as it escapes by default
        }
      });

    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );

4. useTranslation hook으로 Component 내에서 다국어 기능 사용하기

react-i18next 라이브러리는 useTranslation이라는 hook을 제공하는데, 이 hook을 통해서 react-i18next의 i18n 인스턴스를 사용할 수 있게 해준다.  {t('LION')} 이 값이 애플리케이션의 언어설정에 따라 해당 언어설정에 맞게 다르게 표시가 될 것이다. 

import React from 'react';
import { useTranslation } from 'react-i18next';

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

  return (
        <div>
          <h1>{t('LION')}</h1>
        </div>
      );
   }

export default HeadComponent;

 

5. 언어설정을 변경하기

i18n.changeLanguage() 메서드로 언어 설정을 변경할 수 있다. 주로 이 메서드를 호출하는 위치는 헤더의 토글버튼이나 셀렉트 박스로 여러언어 목록이 있고 그것을 선택할 때일 것이다. 

import React from 'react';
import { useTranslation } from 'react-i18next';

function LanguageToggle() {
	const { i18n } = useTranslation();

    const changeLanguage = (language) => {
        i18n.changeLanguage(language);
    };

      return (
        <div>
          <button onClick={() => changeLanguage('en')}>English</button>
          <button onClick={() => changeLanguage('ko')}>한국어</button>
        </div>
      );
    }

export default LanguageToggle;