[React] useTranslation 을 통해 다국어 지원하기 (feat.i18next)

다국어 지원 기능을 React 프로젝트에 추가하려면, 일반적으로 i18n(국제화)을 위한 라이브러리인 react-i18next를 사용합니다. 이를 통해 번역 파일을 관리하고, 여러 언어로 텍스트를 쉽게 변경할 수 있습니다. 아래는 다국어 지원을 위해 react-i18next를 설정하고 사용하는 방법입니다.

1. 필요한 패키지 설치

우선, 다국어 지원을 위해 필요한 패키지들을 설치해야 합니다.

npm install i18next react-i18next i18next-browser-languagedetector

2. i18next 설정 파일 생성

i18n.js 파일을 생성하여 다국어 지원을 설정합니다. 여기서 번역 리소스를 정의하고, 브라우저 언어 감지 등을 설정할 수 있습니다.

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

i18n
  .use(LanguageDetector) // 브라우저 언어 감지
  .use(initReactI18next)  // i18next를 react-i18next로 통합
  .init({
    resources: {
      en: {
        translation: {
          "welcome": "Welcome",
          "description": "This is a multi-language app."
        }
      },
      ko: {
        translation: {
          "welcome": "환영합니다",
          "description": "이것은 다국어 앱입니다."
        }
      }
    },
    fallbackLng: "en", // 사용자의 언어를 감지하지 못했을 때 기본으로 사용할 언어
    interpolation: {
      escapeValue: false, // React는 이미 XSS 방지를 하고 있으므로 설정 불필요
    }
  });

export default i18n;

3. i18next를 React에 통합

i18n.js 파일을 프로젝트에 통합하기 위해 index.js 또는 App.js에서 설정 파일을 import 합니다.

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

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

4. 번역 적용하기

번역을 적용하려면, useTranslation 훅을 사용하여 필요한 텍스트를 t 함수로 불러올 수 있습니다.

// src/components/MainPage.js
import React from 'react';
import { useTranslation } from 'react-i18next';

const MainPage: React.FC = () => {
  const { t } = useTranslation();

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

export default MainPage;

 

5. 언어 변경 기능 추가

언어를 변경하는 기능을 추가하기 위해 버튼을 이용해 언어를 설정할 수 있습니다.

// src/components/LanguageSwitcher.js
import React from 'react';
import { useTranslation } from 'react-i18next';

const LanguageSwitcher: React.FC = () => {
  const { i18n } = useTranslation();

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };

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

export default LanguageSwitcher;

 

6. 대시보드에 언어 선택기 추가

LanguageSwitcher 컴포넌트를 Dashboard에 추가하여 사용자가 언어를 변경할 수 있도록 합니다.

// src/Dashboard.js
import React from 'react';
import MainPage from './MainPage';
import LanguageSwitcher from './LanguageSwitcher';
import Sticky from './Sticky';
import styles from './Dashboard.module.css';

const Dashboard: React.FC = () => {
  return (
    <div className={styles.app}>
      <Sticky />
      <LanguageSwitcher />  {/* 언어 선택기 추가 */}
      <MainPage />
    </div>
  );
};

export default Dashboard;

요약

1. react-i18next를 사용해 국제화를 설정.
2. 번역 리소스를 i18n.js 파일에서 관리.
3. useTranslation 훅을 통해 컴포넌트에서 번역된 텍스트를 표시.
4. LanguageSwitcher로 사용자가 언어를 변경할 수 있도록 기능 추가.

이제 다국어 지원이 적용된 React 앱이 완성되었습니다!