react-i18next 알아보기

코드를 읽어보고있는데 코드에 텍스트가 하나도 없고 t(' dddd')이런 식으로 적혀있어서 이게 뭔가 했는데 react-i18next 를 이용해서 다국어 번역을 적용하기위한 것임을 알게되었다.

 

i18n은 Internationalization의 약어로, "i"와 "n" 사이의 18자를 줄여 부른 표현이다. i18n은 애플리케이션을 여러 언어와 지역에 맞게 조정하여 사용자의 문화와 언어에 맞는 경험을 제공하는 프로세스다. 이는 특히 글로벌 서비스를 제공하는 웹사이트나 앱에서 중요하다. i18n을 통해 애플리케이션이 다양한 언어, 날짜 형식, 통화 표기, 시간대 등을 지원하도록 할 수 있다.

 

react-i18next 설치 및 기본 설정

먼저 react-i18next와 i18next 패키지를 설치해야 한다.

$ npm install react-i18next --save

 

그다음, 언어 파일을 설정하는 기본적인 i18n 설정 파일(i18n.js)을 작성한다.

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

i18n.use(initReactI18next).init({
  resources: {
    ko: {
      translation: {
        GREETING: "안녕하세요",
        WELCOME: "환영합니다"
      }
    },  
    en: {
      translation: {
        GREETING: "Hello",
        WELCOME: "Welcome"
      }
    },
  },
  lng: "ko", // 기본 언어 설정
  keySeparator: ';',
  interpolation: {
    escapeValue: false
  }
});

export default i18n;

위 설정에서 resources 객체에 각 언어의 번역을 담고 있으며, lng 옵션을 통해 기본 언어를 한국어로 설정하고 keySeparator 옵션을 통해 키 구분자를 ;로 지정한다.

 

문자열 번역: useTranslation 훅 사용

컴포넌트 내에서 번역이 필요한 경우, useTranslation 훅을 사용하여 번역을 간편하게 적용할 수 있다.

// MainComponent.js
import React from 'react';
import { useTranslation } from 'react-i18next';

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

  return (
    <div>
      <h1>{t('GREETING')}</h1>
      <p>{t('WELCOME')}</p>
    </div>
  );
}

export default MainComponent;

위 예제에서는 t 함수를 사용해 GREETING 및 WELCOME 키의 번역을 가져와 컴포넌트에서 보여준다. 이렇게 하면 언어 변경 시 해당 문자열이 자동으로 반영된다.