React i18n 다국어 지원하기

웹서비스를 하면서 다국어를 지원해야 하는 경우가 있다. 접속하는 국가 또는 지역에 따라서 다른 언어가 자동으로 지원되거나, 웹사이트에서 내에서 언어를 변경하는 기능이 제공 되기도 한다.

SPA 프레임워크에 따라서 다국어를 지원하는 라이브러리가 각각 존재 한다. 그 중에서 React.js(Hooks)로 웹서비스를 할 때 다국어를 지원하는 방법에 대해서 알아보자.

react-i18next

react-i18next는 React와 React Native 에서 사용할 수 있는 국제화 프레임 워크이다.

설치 방법

npm install react-i18next i18next — save

react-i18next는 react와 함께 사용할 수 있는 기능을 제공하고, i18next는 다국어 핵심 기능을 제공한다.

사용 방법

다국어 기능을 사용하기 위해서는 i18n 모듈을 임포트 하고 지원하고자 하는 언어별로 리소스를 추가하고 i18n 옵션 설정과 함께 초기화 시켜주면 된다.

• Import

// i18n.js 
import i18n from "i18next"
import { initReactI18next } from "react-i18next"

• Resources

const resources = {
  en: { // 영어
    translation: {
      "welcome": "Good morning."
    }
  },
  ko: { // 한국어
    translation: {
      "welcome": "좋은 아침 입니다."
    }
  }
}

서로 전환 하고자 언어는 동일한 key 값을 가져야 한다. ex) "welcome"

• Init

i18n
  .use(initReactI18next)
  .init({
    resources, // 리소스
    lng: "en", // 초기 설정 언어
  })

i18n 초기화 시 언어 리소스와 최초 언어 설정값을 추가해 주면 된다.

// i18n.js 

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

const resources = {
  en: {
    translation: {
      "welcome": "Good morning."
    }
  },
  ko: {
    translation: {
      "welcome": "좋은 아침 입니다."
    }
  }
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: "en",
  });

export default i18n;

위와 같이 완성된 i18n.js 파일을 최상위 index.js 에 추가 하자.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './i18n' // 다국어 지원 파일
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

여기까지가 한글과 영어를 지원하는 최소한의 준비가 되었다고 볼 수 있다.

다국어 기능이 동작하도록 해보자.

// App.js
import React from 'react'
import { useTranslation } from 'react-i18next'
function App() {
  const { t, i18n } = useTranslation()
  const changelanguageToKo = () => i18n.changeLanguage('ko')
  const changelanguageToEn = () => i18n.changeLanguage('en')
  return (
    <div>
      <span>language : {i18n.language}</span>
      <h1>{t('welcome')}</h1>
      <button onClick={changelanguageToKo}>Korean</button>
      <button onClick={changelanguageToEn}>English</button>  
    </div>
  )
}
export default App

React.js 컴포넌트에서 i18n 기능을 사용하기 위해서 react-i18next 필요하다.

• i18n.language : 실시간 제공되는 언어 타입
• t('resource key') : 언어 리소스 key를 입력하면 해당 언어값 출력
• i18n.changeLanguage('language') : 언어를 변환해주는 함수

현재 언어가 무엇인지, 그리고 선택하고자 하는 언어를 버튼을 클릭하면 언어가 변환되어 출력되는 결과를 볼 수 있다.

다국어를 지원하는 방식은 사용자 접속 IP를 확인해서 초기 언어값을 세팅하는 방법, 사용자의 브라우저에서 지원하는 언어 값을 가져와서 세팅하는 방법, 웹사이트 내에서 언어 변환이 가능한 버튼을 추가하는 방법 등이 있을수 있겠다.

다국어를 지원하기 위해 언어가 변환되는 최소한의 기능을 구현해 보았다. 추가 기능들은 공식 웹사이트에 잘 나와있기에 아래 링크를 참고 하도록 하자.

i18n

• React : react-i18next
• Vue : vue-i18n
• Angular : @angular/localize