React로 다국어 지원 구현하기

by

React 애플리케이션을 개발할 때 국제 사용자를 대상으로 다국어 지원을 제공하는 것은 중요한 고려 사항입니다. 이 블로그 포스트에서는 React와 react-i18next 라이브러리를 사용하여 한국어(Korean)와 영어(English)로 다국어 지원을 구현하는 방법을 알아보겠습니다.


단계 1: react-i18next 라이브러리 설치

먼저 react-i18next 라이브러리를 설치해야 합니다.

npm install i18next react-i18next


단계 2: 다국어 지원 초기 설정

React 애플리케이션의 초기 설정에서 다국어 지원을 구성합니다. i18n.js 파일을 생성하고 다음과 같이 설정합니다.

// i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next) // 리액트에 i18next를 연결합니다.
  .init({
    resources: {
      en: {
        translation: {
          hello: 'Hello, World!',
          greeting: 'Welcome to my app.',
        },
      },
      ko: {
        translation: {
          hello: '안녕하세요, 세계!',
          greeting: '내 앱에 오신 것을 환영합니다.',
        },
      },
    },
    lng: 'en', // 기본 언어 설정
    fallbackLng: 'en', // 언어가 지원되지 않을 때의 대체 언어 설정
    interpolation: {
      escapeValue: false, // 리액트는 HTML 태그도 렌더링할 수 있어서 false로 설정합니다.
    },
  });

export default i18n;


단계 3: 다국어 지원 컴포넌트 작성

React 컴포넌트에서 다국어 지원을 사용하려면 useTranslation 훅을 사용하여 다국어 문자열을 불러옵니다.

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

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

  const changeLanguage = (language) => {
    i18n.changeLanguage(language);
  };

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

export default LanguageSwitcher;


단계 4: 다국어 지원 컴포넌트 사용

React 컴포넌트에서 useTranslation 훅을 사용하여 다국어 문자열을 사용합니다.

import React from 'react';
import LanguageSwitcher from './LanguageSwitcher';

function App() {
  return (
    <div>
      <h1>React 다국어 지원 앱</h1>
      <LanguageSwitcher />
    </div>
  );
}

export default App;

위와 같이 간단한 React 애플리케이션에서 다국어 지원을 구현할 수 있습니다. 사용자가 언어를 변경하면 해당 언어로 메시지가 표시됩니다. i18n.js 파일을 통해 다국어 설정을 관리하고, useTranslation 훅을 통해 컴포넌트에서 다국어 문자열을 사용할 수 있습니다.

이를 통해 React 애플리케이션에서 국제 사용자들을 위한 더 나은 사용자 경험을 제공할 수 있습니다.



Leave a Comment