JSX pragma를 활용한 웹 애플리케이션의 국제화(i18n) 처리 방법

05 Oct 2023

JSXpragma

웹 애플리케이션은 다국어 지원을 위해 국제화(i18n) 처리가 필요합니다. JSX pragma를 활용하면 React 기반의 프로젝트에서도 간편하게 국제화 처리를 할 수 있습니다. 이번 포스트에서는 JSX pragma를 사용하여 웹 애플리케이션의 국제화 처리 방법을 알아보겠습니다.

1. i18next 라이브러리 설치

i18next는 React에서 국제화 처리를 위해 많이 사용되는 라이브러리입니다. 우선 i18next를 설치합니다.

npm install i18next

2. 언어 파일 준비

다국어 지원을 위해 각 언어별로 번역된 문구를 담고 있는 언어 파일을 준비해야 합니다. 예를 들어, 한국어와 영어를 지원한다고 가정하겠습니다. locales 폴더 안에 ko.json과 en.json 파일을 만들고 각각의 파일에 해당 언어의 문구를 작성합니다.

ko.json

{
  "title": "안녕하세요",
  "hello": "안녕하세요, {name}님"
}

en.json

{
  "title": "Hello",
  "hello": "Hello, {name}"
}

3. i18n 초기화 설정

i18n 라이브러리를 초기화하고 언어 파일을 로드하는 설정을 해줘야 합니다. JSX pragma를 사용하여 초기화 코드를 작성합니다. i18n.js 파일을 생성하고 아래와 같이 작성합니다.

/** @jsx jsx */
import { jsx } from '@emotion/react';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import i18n from 'i18next';
import enTranslations from './locales/en.json';
import koTranslations from './locales/ko.json';

export function i18nInit() {
  i18n.init({
    resources: {
      en: {
        translation: enTranslations
      },
      ko: {
        translation: koTranslations
      }
    },
    lng: 'en', // 기본 언어 설정
    fallbackLng: 'en', // 언어 파일이 없을 경우 기본 언어로 fallback
    interpolation: {
      escapeValue: false // 리액트 컴포넌트 내에서 HTML 요소를 사용하기 위해 escape 처리 비활성화
    }
  });
}

export default i18n;

4. 언어 변경 기능 추가

언어 변경 기능을 제공하기 위해, 사용자가 선택한 언어로 i18n을 업데이트하는 함수를 작성합니다. LanguageSelector.js 파일을 생성하고 아래와 같이 작성합니다.

/** @jsx jsx */
import { jsx } from '@emotion/react';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';

export function LanguageSelector() {
  const { i18n } = useTranslation();

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

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

export default LanguageSelector;

5. 컴포넌트에서 번역된 문구 사용

번역된 문구를 사용하기 위해 useTranslation 훅을 사용합니다. MainComponent.js 파일을 생성하고 아래와 같이 작성합니다.

/** @jsx jsx */
import { jsx } from '@emotion/react';
import { useTranslation } from 'react-i18next';

export function MainComponent() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('hello', { name: 'John' })}</p>
    </div>
  );
}

export default MainComponent;

6. App 컴포넌트에서 i18n 초기화 및 언어 변경 기능 실행

마지막으로 App 컴포넌트에서 i18n 초기화 및 언어 변경 기능을 실행해야 합니다. App.js 파일을 열고 아래와 같이 수정합니다.

/** @jsx jsx */
import { jsx } from '@emotion/react';
import { useEffect } from 'react';
import { i18nInit } from './i18n';
import LanguageSelector from './LanguageSelector';
import MainComponent from './MainComponent';

export function App() {
  useEffect(() => {
    i18nInit();
  }, []);

  return (
    <div>
      <LanguageSelector />
      <MainComponent />
    </div>
  );
}

export default App;

이제 웹 애플리케이션을 실행하면 언어 변경 버튼을 통해 다국어 지원이 가능한 웹 애플리케이션이 완성됩니다.

이번 포스트에서는 JSX pragma를 활용하여 웹 애플리케이션의 국제화 처리 방법을 살펴보았습니다. i18next 라이브러리를 사용하여 각 언어별로 번역된 문구를 작성하고, 초기화 및 언어 변경 기능을 추가하여 다국어 지원하는 웹 애플리케이션을 구현할 수 있습니다.

#JavaScript #React