[React] i18next를 이용한 다국어 지원 구현하기

 

공식 홈페이지에 있는 이미지

 

웹 애플리케이션을 개발할 때 다양한 국가의 사용자를 대상으로 한다면, 다국어 지원은 거의 필수적이다.
이 글에서는 React에서 i18next, react-i18next 라이브러리를 사용하여 다국어 지원을 간단하게 구현하는 방법에 대해 알아보고자 한다.
참고로 내가 사용하는 패키지 매니저는 yarn이며, TypeScript를 사용하고 있다.

 

필요한 패키지 설치하기

yarn add i18next react-i18next

 

i18next 설정

src 폴더 안에 i18n.ts 파일을 생성하고 아래의 코드를 추가한다.

// src/i18n.ts
import i18n from 'i18next';
import ko_KR from "../assets/locales/ko-KR/translation.json";
import en_US from "../assets/locales/en-US/translation.json";
import { initReactI18next } from 'react-i18next';

const resources = {
  "ko-KR": { translation: ko_KR },
  "en-US": { translation: en_US },
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en', // 기본 언어 설정
  });

export default i18n;

 

번역 파일 추가하기

public/assets/locales 디렉토리를 생성하고, 각 언어별로 폴더를 만든 후, 번역 파일을 추가한다.

아래는 영어와 한글 파일의 위치와 내용이다.

 

영어 : public/assets/locales/en-US/translation.json

{
  "welcome": "Welcome to React"
}

 

한글 : public/assets/locales/ko-KR/translation.json

{
  "welcome": "React에 오신 것을 환영합니다"
}

 

애플리케이션 초기화

i18next 설정 파일을 엔트리 포인트 파일(src/index.tsx 또는 src/index.js)에서 import하여 초기화한다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import './i18n'; // i18n 설정 파일을 import

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

 

다국어 지원 구현하기

마지막으로, 다국어 지원이 필요한 곳에 useTranslation 훅을 사용해서 t로 감싸준다.

언어 전환이 필요한 경우 i18n.changeLanguage 메소드를 호출해 애플리케이션의 현재 언어를 변경할 수 있다.

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

function App() {
  const { t, i18n } = useTranslation();

  // 언어 전환 함수
  const changeLanguage = (language) => {
    i18n.changeLanguage(language);
  };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      {/* 언어 전환 버튼 */}
      <button onClick={() => changeLanguage('en-US')}>English</button>
      <button onClick={() => changeLanguage('ko-KR')}>한국어</button>
    </div>
  );
}

export default App;

 

여기까지 다국어 지원을 구현하는 방법에 대해 간단히 알아보았다.

이 구현을 기반으로, 추가적인 언어 지원이나 더 복잡한 다국어 기능을 개발할 수 있다.

 

 

 

다국어 지원 자동화가 필요하다면 아래의 게시글을 참고하면 된다.

[React] 다국어 지원 자동화하기 - i18next, Google Spreadsheet

 

---

 

공식 가이드

https://react.i18next.com/