react-i18next로 다국어 구현하기 4강: React와 i18next 통합

React와 i18next 통합

이번 섹션에서는 React 애플리케이션에 i18next를 통합하여 다국어 기능을 적용하는 방법을 배웁니다. React에서 useTranslation 훅을 사용하여 컴포넌트에 번역을 간편하게 적용할 수 있습니다. 우리는 기본 텍스트뿐만 아니라 동적 콘텐츠에 대해서도 번역을 적용하는 실습을 진행할 것입니다.

React와 i18next의 통합

---

1. React 앱에서 i18next를 사용하여 번역 적용하기

React에서 i18next를 사용하기 위해서는, useTranslation 훅을 통해 각 컴포넌트에 번역 기능을 추가할 수 있습니다. 이 훅은 t 함수를 반환하며, 이 함수는 번역할 키 값을 받아 적절한 번역 텍스트를 반환합니다.

React에서 useTranslation 훅 사용 예시:

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

const WelcomeComponent = () => {
  const { t } = useTranslation();

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

export default WelcomeComponent;

 

위 코드에서 useTranslation 훅을 사용하여 t 함수를 얻고, 번역 키 welcome과 description을 사용하여 번역된 텍스트를 표시하고 있습니다. 언어가 변경될 때마다 해당 키에 맞는 번역이 동적으로 표시됩니다.

---

2. useTranslation 훅을 사용하여 컴포넌트에서 번역 적용

useTranslation 훅을 사용하면 여러 컴포넌트에서 동일한 방식으로 번역을 적용할 수 있습니다. 이를 통해 각 컴포넌트에서 t 함수를 호출하여 번역 텍스트를 불러옵니다.

예시:

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

const Header = () => {
  const { t } = useTranslation();

  return (
    <header>
      <nav>
        <ul>
          <li>{t('home')}</li>
          <li>{t('about')}</li>
          <li>{t('contact')}</li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;

위 예시에서는 useTranslation 훅을 사용하여 네비게이션 메뉴 항목의 번역을 적용했습니다. 각 항목은 home, about, contact라는 키로 정의된 번역을 불러옵니다.

---

3. 기본 텍스트 번역 및 동적 콘텐츠 번역

기본 텍스트 번역은 고정된 텍스트를 번역하는 것으로, 예를 들어 웹사이트의 제목이나 설명 등이 해당됩니다. 이는 위에서 본 예시처럼 useTranslation 훅을 사용하여 간단하게 적용할 수 있습니다.

동적 콘텐츠 번역은 사용자 입력이나 상태에 따라 변동되는 텍스트에 번역을 적용하는 경우를 말합니다. 예를 들어, 동적으로 렌더링되는 리스트 항목이나 버튼 라벨 등을 번역할 때 사용됩니다.

예시:

const DynamicContent = () => {
  const { t } = useTranslation();
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>{t('clicked', { count })}</p>
      <button onClick={() => setCount(count + 1)}>{t('clickMe')}</button>
    </div>
  );
};

위 예시에서는 clicked라는 번역 키를 사용하여 클릭 횟수를 표시합니다. count라는 동적 값을 포함하여 텍스트가 동적으로 변경됩니다. t('clicked', { count })는 count 값에 따라 다른 번역 텍스트를 표시할 수 있게 해줍니다.

---

실습

1. React 컴포넌트에 useTranslation 적용

1. 먼저, 기존에 설정한 i18n.js 파일을 import하고 useTranslation 훅을 이용하여 React 컴포넌트에서 번역 기능을 적용합니다.

   import React from 'react';
   import { useTranslation } from 'react-i18next';
   import './i18n';
   
   const MyComponent = () => {
     const { t } = useTranslation();
   
     return (
       <div>
         <h1>{t('welcome')}</h1>
         <p>{t('description')}</p>
       </div>
     );
   };
   
   export default MyComponent;

2. npm start로 프로그램 실행해서 각 언어에 대해 JSON 리소스 파일을 설정한 후, 언어 변경에 따라 welcome과 description 번역이 동적으로 적용되는지 확인합니다.

App.js 수정 후 실행화면

2. 버튼 및 텍스트 번역 적용

버튼에 useTranslation을 적용하여 번역을 처리하고, 클릭할 때마다 상태가 변경되는 동적 콘텐츠에도 번역을 적용합니다.

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

const CounterComponent = () => {
  const { t } = useTranslation();
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{t('clickCount', { count })}</p>
      <button onClick={() => setCount(count + 1)}>
        {t('clickMe')}
      </button>
    </div>
  );
};

export default CounterComponent;

 

JSON 파일 예시 (한국어, 영어, 아랍어):

{
  "clickMe": "Click me",
  "clickCount": "You have clicked {{count}} times"
}

이 코드는 count 상태를 기반으로 번역된 텍스트를 동적으로 표시하며, 버튼 클릭 시 번역된 텍스트와 함께 클릭 횟수가 업데이트됩니다.

translation.json 수정

추가된 Button Click 실행화면

---

마무리

React에서 i18next와 useTranslation 훅을 사용하면 쉽게 다국어 기능을 구현할 수 있습니다. 기본 텍스트와 동적 콘텐츠 모두 번역할 수 있으며, 상태나 사용자 입력에 따라 변동되는 번역 기능도 쉽게 적용할 수 있습니다. 이번 실습을 통해 React 컴포넌트에 다국어 기능을 어떻게 적용하는지 배웠습니다. 다음 단계에서는 언어 변경 기능을 구현하여 사용자가 언어를 선택할 수 있는 인터페이스를 추가해보겠습니다.