react-i18next로 다국어 구현하기 5강: 언어 변경 기능 구현 (드롭다운)

언어 변경 기능 구현 (드롭다운)

이번 섹션에서는 드롭다운 메뉴를 사용하여 언어를 변경하는 기능을 구현해 보겠습니다. i18next의 changeLanguage 메서드를 사용하여 사용자가 선택한 언어에 따라 애플리케이션의 모든 콘텐츠가 동적으로 변경되도록 처리합니다.

React 애플리케이션에서 드롭다운 메뉴를 사용해 언어를 선택

---

1. 드롭다운 메뉴로 언어 선택 기능 구현

우리는 React에서 언어를 선택할 수 있는 드롭다운 메뉴를 추가하고, 사용자가 선택한 언어로 번역된 콘텐츠를 보여줄 것입니다. i18next는 changeLanguage 메서드를 제공하여 이 작업을 간단하게 처리할 수 있습니다.

드롭다운 메뉴 예시:

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

const LanguageSelector = () => {
  const { i18n } = useTranslation();

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

  return (
    <div>
      <select onChange={(e) => changeLanguage(e.target.value)}>
        <option value="en">English</option>
        <option value="ko">한국어</option>
        <option value="ar">العربية</option>
      </select>
    </div>
  );
};

export default LanguageSelector;

위 코드에서는 select 태그로 드롭다운 메뉴를 구현하고, 언어가 변경될 때 i18n.changeLanguage 메서드를 호출하여 해당 언어로 콘텐츠를 동적으로 변환합니다.

---

2. i18next.changeLanguage 메서드를 사용하여 언어 변경 처리

changeLanguage 메서드는 사용자가 선택한 언어 코드를 인수로 받아 애플리케이션의 모든 콘텐츠를 해당 언어로 변환합니다. 예를 들어, 드롭다운에서 한국어를 선택하면 i18n.changeLanguage('ko')가 호출되어 모든 콘텐츠가 한국어로 바뀝니다.

이 메서드는 비동기로 동작하며, 선택된 언어가 애플리케이션 내 모든 컴포넌트에 적용됩니다.

---

실습

1. 드롭다운 언어 선택 메뉴 추가

1. 위에서 작성한 LanguageSelector 컴포넌트를 사용하여 언어 선택 기능을 추가합니다.
2. select 태그 내에서 각 옵션은 선택할 수 있는 언어를 나타내며, 선택된 값에 따라 i18n.changeLanguage가 호출됩니다.

LanguageSelector.js 생성

2. 언어 선택 시 해당 언어로 콘텐츠 변경되도록 구현

1. useTranslation 훅을 사용하는 컴포넌트에서 언어 선택에 따른 번역 결과를 확인합니다. 예를 들어, LanguageSelector 컴포넌트가 페이지에 추가되면 언어를 선택할 때마다 콘텐츠가 해당 언어로 변환됩니다.

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

---

결과 확인

1. 애플리케이션을 실행한 후, 드롭다운 메뉴에서 언어를 변경해봅니다.
2. 한국어를 선택하면 "우리 애플리케이션에 오신 것을 환영합니다"라는 번역된 텍스트가 보이고, 아랍어를 선택하면 해당 언어로 변환된 콘텐츠가 표시됩니다.
3. i18n.changeLanguage 메서드가 선택한 언어에 따라 콘텐츠를 실시간으로 변경하는 것을 확인할 수 있습니다.

Dropdown에서 언어를 변경하여 동작 확인

---

마무리

이로써 React 애플리케이션에서 드롭다운 메뉴를 통해 언어를 동적으로 변경하는 방법을 구현했습니다. i18next의 changeLanguage 메서드를 사용하여 선택한 언어에 맞춰 모든 콘텐츠를 자동으로 변환할 수 있습니다.