이 블로그 포스트에서는 React 애플리케이션에 다국어 지원 기능을 추가하는 방법을 소개합니다. 이를 위해 Custom Hook을 활용할 것이며, 이 방법을 통해 언어 전환을 쉽게 처리할 수 있습니다. 또한 이 예제에서는 React Internationalization Library인 react-i18next을 사용할 것입니다.

시작하기 전에

다국어 지원 기능을 구현하기 위해 react-i18next 라이브러리를 사용하므로, 프로젝트에 해당 라이브러리를 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다:

npm install react-i18next

Custom Hook 구현

이제 Custom Hook을 만들어 다국어 지원 기능을 추가할 수 있습니다. 다음과 같이 useTranslation이라는 이름의 Custom Hook을 구현할 수 있습니다:

import { useTranslation } from 'react-i18next';

const useTranslation = () => {
  const { t, i18n } = useTranslation();

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

  return { t, changeLanguage };
};

export default useTranslation;

이 Custom Hook은 useTranslation을 호출하고 반환된 t와 changeLanguage 함수를 사용하여 다국어 지원 기능을 활용할 수 있습니다.

사용하기

Custom Hook을 사용하려면 다음과 같이 작성된 컴포넌트 내에서 호출해야 합니다:

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

const MyComponent = () => {
  const { t, changeLanguage } = useTranslation();

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

export default MyComponent;

위 코드에서 useTranslation을 호출하여 t와 changeLanguage 함수를 받아옵니다. changeLanguage 함수는 언어 전환이 일어날 때 호출되며, t 함수를 통해 다국어 문자열을 불러올 수 있습니다. 이 예제에서는 ‘hello’라는 키를 사용하여 문자열을 출력하고 있습니다.

결론

Custom Hook을 사용하여 React 애플리케이션에 다국어 지원 기능을 추가하는 방법을 배웠습니다. react-i18next 라이브러리와 함께 Custom Hook을 사용하면 언어 전환을 손쉽게 처리할 수 있습니다. 이를 통해 사용자의 언어에 맞는 경험을 제공할 수 있습니다.

#react #i18n