React & Next.js

React-i18next로 다국어 지원 구현하기

0

오늘은 리액트(React) 애플리케이션에서 다양한 언어를 지원하는 방법에 대해 알아보겠습니다. 글로벌 시장에 진출하거나 다양한 언어 사용자를 대상으로 서비스를 제공하려면 국제화(i18n)가 필수적이죠. 그래서 이번 글에서는 `react-i18next`를 활용하여 리액트 앱에 다국어 지원을 쉽게 추가하는 방법을 자세히 알아보겠습니다.

1. 필요한 패키지 설치하기

먼저, 리액트 국제화 구현을 위한 기본적인 패키지들을 설치해야 합니다. 아래 명령어를 사용하여 필요한 라이브러리들을 한 번에 설치할 수 있습니다.

npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector

이 패키지들은 각각 다음과 같은 역할을 수행합니다:

  • i18next:@b] 다국어 지원의 핵심 기능을 제공합니다.
  • react-i18next:@b] 리액트 컴포넌트에서 i18next를 쉽게 사용할 수 있도록 도와줍니다.
  • i18next-http-backend:@b] 서버에서 번역 파일을 로드할 때 사용합니다.
  • i18next-browser-languagedetector:@b] 사용자의 브라우저 언어를 자동으로 감지합니다.

2. i18next 초기 설정하기

다음으로, 프로젝트의 최상위 파일(예: `src/index.js` 또는 `App.js`)에 i18next를 초기화하는 코드를 추가합니다. 이 설정은 애플리케이션에서 다국어 지원을 활성화하는 기반을 마련합니다.

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

i18n
  .use(HttpBackend) // 서버에서 리소스 로드
  .use(LanguageDetector) // 브라우저 언어 감지
  .use(initReactI18next) // 리액트와 i18next 바인딩
  .init({
    fallbackLng: 'en', // 기본 언어 설정
    debug: true,
    interpolation: {
      escapeValue: false, // XSS 보호
    },
  });

export default i18n;

이 코드는 라이브러리들을 초기화하고, 언어 감지 및 번역 파일 로딩 방법을 설정합니다.

3. 번역 파일 작성 및 구성

`public/locales` 디렉토리를 생성하고, 각 언어별로 JSON 형식의 번역 파일을 작성합니다. 예를 들어, 영어와 한국어 지원을 위해 다음과 같이 파일을 구성할 수 있습니다.

영어

`public/locales/en/translation.json`:

한국어

{
    "welcome": "Welcome to React"
  }
  ```


`public/locales/ko/translation.json`:

#PRE lang=json
  {
    "welcome": "리액트에 오신 것을 환영합니다"
  }

4. 번역 텍스트 사용하기

리액트 컴포넌트에서 번역 텍스트를 사용하려면 `useTranslation` 훅을 이용합니다. 이 훅을 통해 번역된 텍스트를 쉽게 가져와서 사용할 수 있습니다. 아래 예시에서는 간단한 환영 메시지를 화면에 표시하는 방법을 보여줍니다.

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

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

  return <h1>{t('welcome')}</h1>; // 'welcome' 키에 해당하는 번역된 텍스트를 렌더링합니다.
}

export default App;

5. 언어 변경 기능 추가하기

사용자가 원하는 언어로 앱의 언어를 쉽게 변경할 수 있도록 버튼을 추가합니다. 이는 `i18n.changeLanguage` 함수를 호출하여 구현할 수 있으며, 사용자가 버튼을 클릭하면 선택한 언어로 앱의 인터페이스가 업데이트됩니다.

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

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

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

export default App;

결론

리액트에서 `react-i18next`를 사용하여 국제화를 구현하는 방법을 자세히 알아보았습니다. 이 도구를 사용하면 개발자는 번역 관리, 언어 감지, 동적 언어 변경 등 다양한 국제화 기능을 손쉽게 구현할 수 있습니다. 리액트 애플리케이션을 글로벌 시장에 맞추어 최적화하고 싶다면, 오늘 소개한 방법을 활용해 보세요. 다양한 언어를 지원함으로써 더 넓은 사용자 기반에 접근하고, 사용자 경험을 향상시킬 수 있습니다.

Leave a Reply