[React] 다국어 처리 - i18n

i18n은 다국어 처리를 돕는 라이브러리이다.

처음엔 파파고처럼 자동번역 시스템인줄 알았지만 그게 아니라 json에 하나하나 언어를 담고 key값에 해당하는 언어를 보여주는 형식으로 작동하는 시스템이다.

i18n 홈페이지

https://react.i18next.com/getting-started
당연한 말이지만 홈페이지를 직접 확인하는 것이 제일 좋다.

1. 패키지 설치

npm install react-i18next i18next --save

2. src 관리

기본적으로 i18n.use.init으로 시작하게 된다. 아래에는 그 예시를 담아보았다.

중요한 것만 살펴보자면

resources : en과 kr, fr 등의 언어가 담긴 json이다. 이 때, 각 언어의 key값은 일치해야한다. 예를 들어서

const resources = {
  en: {
    translation: {
      "Welcome to React": "Welcome to React and react-i18next"
    }
  },
  fr: {
    translation: {
      "Welcome to React": "Bienvenue à React et react-i18next"
    }
  }
};

라고 했을 때 한 쪽 키값이 다른쪽과 다를 경우(예: translate) 오류가 발생한다.

lng : 언어값으로 "en", "kr" 등을 넣는다

defaultNS : 기본으로 적용될 네임스페이스를 의미한다.

3. 번역 파일 생성

번역파일은 json형식으로 담아내게 된다.

//  /src/locales/ko/common.json
{
  "header": {
    "mypage": "마이페이지",
    "logout": "로그아웃",
    "login": "로그인",
    "register": "회원가입",
    "language": "언어설정",
    "help": "고객센터"
  },
  "nav": {
    "dashboard": "대시보드",
    "shopping-mall": "쇼핑몰 관리"
  }
}

//  /src/locales/en/common.json
{
  "header": {
    "mypage": "My page",
    "logout": "Sign Out",
    "login": "Sign In",
    "register": "Sign Up",
    "language": "Languages",
    "help": "Help"
  },
  "nav": {
    "dashboard": "Dashboard",
    "shopping-mall": "Shopping Mall"
  }
}

여기에서 header nav 부분이 네임스페이스이다. json파일로 대분류, 네임스페이스로 소분류한다고 생각하면 된다.

4. App.tsx에 설정하기

import i18n from './i18n'
export default function(){
   i18n.createInstance()
   return (
   ...
   )
}

5-1. 다국어번역 사용하기

import { useTranslation } from 'react-i18next'
export default function News(){
	const { t } = useTranslation('nav')
    return (
      <div>{t('shopping-mall')}</div>
   )
}

최대한 간단하게 정리해보았다. 요지는
1. useTranslation을 import한다.
2. useTranslation 함수 안에 ns(네임스페이스)값을 넣고 좌항에 { t } 를 넣는다.
3. t함수 안에 원하는 키값을 string으로 넣어준다

5-2. 언어 변경 함수 사용하기

import { useTranslation } from 'react-i18next'
const { i18n } = useTranslation('header')
const LanguageChange = (lng:string) => {
  i18n.changeLanguage(lng)
}

i18n.changeLanguage를 사용하여 간단하게 해결하였다.