현재 내가 개발하는 서비스는 글로벌을 타깃으로 영어를 Default 언어로 서비스 제공을 하고 있었는데 회사 방향성에 변화가 생겨서 추가적으로 한인 시장을 타깃으로 한다고 해서 다국어 처리가 들어가게 됐었다. 그 과정을 글로 옮겨보자.

i18n이란?

우선 i18n이 무엇인지 알아야 무엇을 어떻게 왜 작업하는지 알 수 있지 않을까? i18n은 자바스크립트를 위해 작성된 국제화 프레임워크라고 한다. React, Vue, Angular 같은 프런트엔드의 프레임워크뿐만 아니라 Node.js, Deno, Android, IOS, PHP 등 다른 플랫폼에서도 사용할 수 있는 국제화를 도와주는 라이브러리라고 한다.

i18n을 사용하면 사용자의 언어를 감지할 수 있고 그에 따라 번역본을 보여줄 수 있다. 더 나아가 선택적으로 번역을 캐싱을 할 수도 있다고 한다. 그럼 이제 어떻게 사용을 할 수 있을까?

설치

# yarn
yarn add i18next
# npm 
install react-i18next i18next --save

Init

나 같은 경우는 Translations 폴더 안에 resources 폴더를 두고 그 안에 en, ko 파일을 만들어서 번역본을 저장했다. index.ts에서는 두 파일을 export 해주는 간단한 코드만 들어가 있고 Translations 안에 있는 index.ts 파일에서 i18n을 Init 해준다.

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import * as resources from './resources'

i18n.use(initReactI18next).init({
  compatibilityJSON: 'v3',
  resources: {
    ...Object.entries(resources).reduce(
      (acc, [key, value]) => ({
        ...acc,
        [key]: {
          translation: value,
        },
      }),
      {},
    ),
  },
  lng: 'en',
})

export default i18n

사용

사용법은 간단하다.

import { useTranslation } from 'react-i18next'

const { t, i18n } = useTranslation();

<Text style={[styles.titleText]}>{t('language.title')}</Text>

react-i18next에서 useTranslation 이라는 hook을 제공해주는데
이것을 import 한 후에 t 변수로 선언해서
문구가 들어가는 부분에 en, ko 파일들에 작성한 key 값 대로 넣어주면
현재 선택된 언어로 번역본을 가져오게 된다.

언어를 변경하는 부분도 심플하다.

i18n.changeLanguage(lang)

# Example
i18n.changeLanguage('en')

changeLanguage 함수로 param에 변경을 원하는 내가 설정한 언어의 string을 패스하면
바로 언어가 변경된다.

Conclusion

react-i18next을 적용하고 사용함에 있어서 어려움은 없었던 것 같다. 공식문서 설명도 간결하고 쉽게 되어 있었고 라이브러리 자체도 복잡하지 않아서 구현하기 쉬웠다. 무엇보다 react-i18next의 사용성이 굉장히 좋았다. 전에 앱을 개발할 때는 내가 세팅하지 않았던 다국어 처리 라이브러리를 사용했었는데 (이름도 기억이 나질 않는..), 언어를 변경할 때마다 앱을 새로 시작해야 되는 번거로움이 있었다. 개발을 할 때도 불편했었는데 사용자 입장에서는 얼마나 더 불편했을까? 그런데 react-i18next은 앱 재시작 없이 언어를 즉각적으로 변경할 수 있어서 큰 장점 이라고 생각했다.

100% 활용하기 위해 또 어떤 기능을 활용할 수 있는지 더 공부해봐야겠다.

공식문서: https://react.i18next.com/getting-started