React에서 다국어(Globalization) 구현하기(feat, react-i18next)

React에서 다국어(Globalization) 구현하기: react-i18next를 중심으로

다국어 지원은 글로벌 웹 애플리케이션에서 필수적인 기능입니다. React에서는 여러 라이브러리를 통해 다국어를 지원할 수 있는데, 그중 가장 널리 사용되는 라이브러리가 react-i18next입니다. 이 글에서는 react-i18next를 사용한 다국어 구현 방법을 예제 중심으로 설명하고, 그 외 다른 라이브러리들과의 차이점도 함께 비교해 보겠습니다.

react-i18next로 다국어 처리하기

---

1. i18n (Internationalization)이란?

i18n은 국제화(Internationalization)의 약어로, "i"와 "n" 사이에 18개의 문자가 들어가 있기 때문에 붙여진 이름입니다. 이는 소프트웨어를 다양한 언어와 지역에 맞게 확장할 수 있도록 설계하는 과정을 의미합니다. react-i18next는 이 i18n 개념을 쉽게 구현할 수 있도록 도와주는 대표적인 라이브러리입니다.

---

2. react-i18next 설치 및 기본 설정

React에서 i18n을 구현하기 위해 react-i18next를 사용해보겠습니다. 먼저, npm을 통해 해당 라이브러리를 설치합니다.

라이브러리 설치

npm install react-i18next i18next

 

설치 후, 다국어 설정을 위한 기본적인 환경을 설정해야 합니다. 예시로, 영어와 한국어를 지원하는 간단한 다국어 설정을 진행해 보겠습니다.

---

3. i18next 설정 파일 구성

먼저, i18n.js 파일을 생성하여 다국어 설정을 정의합니다. 이 설정 파일에서는 지원할 언어와 관련된 리소스를 정의합니다.

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

const resources = {
  en: {
    translation: {
      welcome: "Welcome to our application",
      description: "This is an example of i18n in React"
    }
  },
  ko: {
    translation: {
      welcome: "우리 애플리케이션에 오신 것을 환영합니다",
      description: "이것은 React에서 i18n을 사용하는 예제입니다"
    }
  }
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: 'en', // 기본 언어 설정
    fallbackLng: 'en', // 지원되지 않는 언어일 때 기본으로 사용할 언어
    interpolation: {
      escapeValue: false, // React는 이미 XSS 보호를 제공하므로 이 값을 false로 설정
    }
  });

export default i18n;

---

4. App 컴포넌트에서 다국어 지원 적용

다국어 설정이 완료된 후, 실제 컴포넌트에서 다국어를 적용하는 방법을 알아보겠습니다. useTranslation 훅을 사용하여 텍스트를 쉽게 번역할 수 있습니다.

// App.js
import React from 'react';
import { useTranslation } from 'react-i18next';
import './i18n';  // i18n 설정 파일을 가져옴

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

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);  // 언어 변경
  };

  return (
    <div className="App">
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      
      {/* 언어 변경 버튼 */}
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('ko')}>한국어</button>
    </div>
  );
}

export default App;

 

위 코드에서는 useTranslation 훅을 사용해 다국어 번역을 적용합니다. t 함수는 번역된 문자열을 반환하며, i18n.changeLanguage 함수를 통해 언어를 변경할 수 있습니다.

---

5. 언어 리소스 관리 방법

다국어 애플리케이션을 관리하다 보면, 다수의 언어 파일을 처리하게 됩니다. 이러한 파일들은 프로젝트의 public 디렉토리에 JSON 파일로 저장할 수 있으며, 다음과 같은 방식으로 동적으로 가져올 수 있습니다.

폴더 구조 예시

/public/locales/en/translation.json
/public/locales/ko/translation.json

각 JSON 파일의 예시

// en/translation.json
{
  "welcome": "Welcome to our application",
  "description": "This is an example of i18n in React"
}

// ko/translation.json
{
  "welcome": "우리 애플리케이션에 오신 것을 환영합니다",
  "description": "이것은 React에서 i18n을 사용하는 예제입니다"
}

i18n.js에서 리소스를 다음과 같이 설정할 수 있습니다.

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    backend: {
      loadPath: '/locales/{{lng}}/translation.json',
    },
    interpolation: {
      escapeValue: false,
    }
  });

export default i18n;

 

위 예시에서는 i18next-http-backend를 사용해 다국어 리소스를 외부 JSON 파일로 관리할 수 있습니다.

---

6. react-i18next와 다른 다국어 라이브러리 비교

react-i18next 외에도 여러 다국어 라이브러리가 존재합니다. 각 라이브러리마다 장단점이 있어 프로젝트에 맞게 선택할 수 있습니다.

• react-intl: 날짜, 시간, 숫자 형식을 포맷팅하는 데 최적화되어 있습니다.
• formatjs: 국제화를 위한 포맷팅 도구로, 복잡한 데이터 처리에 적합합니다.
• polyglot.js: 매우 경량화된 라이브러리로, 간단한 국제화 프로젝트에 적합합니다.

react-i18next는 커뮤니티의 지원이 활발하고 사용 방법이 쉬운 반면, 대규모 포맷팅과 데이터를 다뤄야 하는 경우 react-intl이나 formatjs를 사용하는 것이 좋습니다.

---

7. 결론

react-i18next는 React 애플리케이션에서 다국어 지원을 구현하기에 매우 유용한 라이브러리입니다. 직관적인 API와 간편한 설정 덕분에 빠르고 쉽게 다국어 기능을 구현할 수 있으며, 확장성도 뛰어납니다. 또한, 서버에서 JSON 파일로 다국어 리소스를 관리할 수 있어 대규모 프로젝트에서도 손쉽게 사용할 수 있습니다.