다국어 지원하기

우리 프로그래머들은 내 서비스가 전세계로 뻗어나가는 걸 마음속 낭만으로 가지고 있다.

다국어로 언어를 보여주고 싶으면 어떻게 해야할까?

대부분은 위처럼 한글을 하드코딩하여 JSX에 표현할 것이다.

리액트에서는 위 하드코딩을 아이폰에서 텍스트 대치하듯이 사용할 수 있다.

i18next

react-i18next는 리액트에서 다국어 지원을 도와주는 패키지이다.

설치

npm install i18next react-i18next

두 패키지를 설치한다.

설치환경 마련

src/ 디렉토리의 하위에 locales 폴더를 만든다.

그 안에 언어별 단어를 하드코딩한다.

// en.json
{
  "greeting": "Hello!"
}

// ko.json
{
  "greeting": "안녕하세요!"
}

컴포넌트에 적용

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

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

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

export default Greeting;

위 처럼 useTranslation Hooks를 사용하면 greeting이라는 키값과 매핑된 값을 보여줄 수 있다.

언어설정을 바꾸고 싶을땐?

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

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

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

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

export default LanguageSwitcher;

useTranslation Hooks에서 changeLanguage라는 함수가 존재한다.

영어라면 en, 한국어라면 ko 처럼 ISO 639-1 또는 ISO 639-2 코드로 매핑되어있는 값을 넣어 변환할 수 있다.