React에서 다국어 지원 구현하기

 

전 세계 사용자들에게 더 나은 경험을 제공하려면 애플리케이션에서 다국어 지원이 필수적입니다. React를 사용하여 다국어 기능을 구현하는 방법은 비교적 간단하며, i18n(국제화) 라이브러리를 통해 효율적으로 처리할 수 있습니다. 이번 글에서는 React 애플리케이션에서 다국어 지원을 구현하는 방법을 단계별로 알아보겠습니다.

1. 다국어 지원의 핵심 개념 이해하기

다국어 지원은 i18n(internationalization)과 l10n(localization) 두 가지 주요 개념을 기반으로 합니다.

• i18n: 애플리케이션이 다양한 언어와 지역을 지원할 수 있도록 설계하는 과정.
• l10n: 특정 언어와 지역에 맞는 번역과 형식으로 데이터를 제공하는 과정.

React에서는 react-i18next, react-intl 등 여러 라이브러리를 활용하여 이러한 과정을 간편하게 처리할 수 있습니다. 이 글에서는 널리 사용되는 react-i18next를 사용합니다.

---

2. react-i18next 라이브러리 설치 및 설정

설치

먼저 프로젝트에 필요한 패키지를 설치합니다.

npm install i18next react-i18next i18next-browser-languagedetector

• i18next: 핵심 국제화 라이브러리.
• react-i18next: React에서 i18next를 쉽게 사용할 수 있도록 도와주는 패키지.
• i18next-browser-languagedetector: 사용자의 브라우저 언어를 자동으로 감지하는 플러그인.

설정 파일 추가

src/i18n.js 파일을 생성하고 다음과 같이 초기 설정을 구성합니다.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

// 번역 리소스 정의
const resources = {
  en: {
    translation: {
      welcome: "Welcome to our application!",
      description: "This is an example of multilingual support."
    }
  },
  ko: {
    translation: {
      welcome: "우리 애플리케이션에 오신 것을 환영합니다!",
      description: "이것은 다국어 지원의 예제입니다."
    }
  }
};

// i18n 초기화
i18n
  .use(LanguageDetector) // 브라우저 언어 감지 플러그인 사용
  .use(initReactI18next) // React와의 통합
  .init({
    resources,
    fallbackLng: 'en', // 기본 언어 설정
    interpolation: {
      escapeValue: false // React는 기본적으로 XSS 보호를 제공하므로 비활성화.
    }
  });

export default i18n;

이 코드는 영어(en)와 한국어(ko) 두 언어에 대한 번역 리소스를 설정합니다. fallbackLng는 지원하지 않는 언어가 감지되었을 때 사용할 기본 언어입니다.

---

3. 다국어 텍스트 적용하기

이제 React 컴포넌트에 다국어 텍스트를 적용해보겠습니다.

App.js 예제

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

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

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

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>

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

export default App;

주요 함수 설명

1. useTranslation: react-i18next에서 제공하는 훅으로, 번역 함수(t)와 언어 변경 함수(i18n)를 제공합니다.
2. t 함수: 번역 키를 입력하면 해당 키에 맞는 텍스트를 반환합니다.
3. changeLanguage: 사용자의 언어를 변경하는 함수입니다.

---

4. 추가 언어 확장 및 관리

번역 리소스 파일 분리

번역 리소스를 개별 파일로 관리하면 유지보수가 쉬워집니다. 예를 들어, src/locales/en.json과 src/locales/ko.json 파일을 생성합니다.

locales/en.json

{
  "welcome": "Welcome to our application!",
  "description": "This is an example of multilingual support."
}

locales/ko.json

{
  "welcome": "우리 애플리케이션에 오신 것을 환영합니다!",
  "description": "이것은 다국어 지원의 예제입니다."
}

그런 다음, i18n.js에서 다음과 같이 리소스를 로드합니다:

import en from './locales/en.json';
import ko from './locales/ko.json';

const resources = {
  en: { translation: en },
  ko: { translation: ko }
};

기타 언어 추가

다른 언어를 추가하려면 번역 파일을 생성하고 리소스 객체에 추가하면 됩니다.

---

5. 최적화 및 고려 사항

Lazy Loading

번역 파일이 많아질 경우 초기 로딩 시간을 줄이기 위해 **지연 로딩(Lazy Loading)**을 고려하세요.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

const loadLocales = (lng) => {
  return import(`./locales/${lng}.json`);
};

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    },
    backend: {
      loadPath: loadLocales
    }
  });

export default i18n;

브라우저 언어 감지

i18next-browser-languagedetector를 활용하면 사용자의 브라우저 설정에 따라 기본 언어를 자동으로 감지할 수 있습니다. 이를 통해 더 나은 사용자 경험을 제공할 수 있습니다.

---

결론

React에서 다국어 지원을 구현하는 과정은 비교적 간단하며, react-i18next와 같은 강력한 라이브러리를 통해 더욱 효율적으로 처리할 수 있습니다. 위에서 설명한 방법을 따라하면 다국어 지원 기능을 손쉽게 추가하고 관리할 수 있습니다. 사용자의 언어와 지역에 맞춘 애플리케이션을 제공하여 글로벌 사용자들에게 더 나은 경험을 선사해보세요!