React에서 다국어 적용하기

React에서 다국어를 적용해 보았습니다.

2022년 11월 27일 · 0 분 소요

다국어 적용하기는 현재 총 2편의 시리즈로 구성되어 있습니다.

React에서 다국어 적용하기 (현재글)
Next.js에서 다국어 적용하기

들어가며

요즘 저희가 진행하는 프로젝트들은 모두 다국어를 지원하고 있습니다. 하여, 저도 프로젝트 세팅 단계에서 다국어 설정을 해야만 했습니다. 처음에는 헤매기도 했던 React 다국어 설정을 이번 포스트에 기록해보고자 합니다.

다국어 설정하기

1. 패키지 설치

다국어를 적용하기 위해서는 i18next 패키지 설치가 필요합니다. 아래 2개의 패키지를 설치합니다.

npm install react-i18next i18next

2. 다국어 폴더 생성

src 폴더에 i18n 폴더 생성 후, index.js 파일과 국, 영문 콘텐츠를 넣을 json 파일을 각각 생성해줍니다. 페이지별로 다국어 파일을 나누거나, 좀 더 세분화하여 관리하고 싶으신 분들은 i18n 폴더 내에서 ‘en’ 폴더와 ‘ko’ 폴더를 나누셔도 됩니다. 저는 싱글 페이지 기준으로 간단하게 국, 영문 파일만 분리했습니다.

index.js에는 다음과 같은 내용을 넣어줍니다.

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

import langEn from './translations.en'; // 영문 파일 import
import langKo from './translations.ko'; // 국문 파일 import

const resources = {
  en: {
    translation: langEn,
  },
  ko: {
    translation: langKo,
  },
};
i18n.use(initReactI18next).init({
  resources,
  lng: 'en', // 기본 언어 설정
  debug: false, // 디버그 필요할 경우 true 변경
  interpolation: {
    escapeValue: false, // react already safes from xss
  },
  react: {
    bindI18n: 'languageChanged',
    bindI18nStore: '',
    transEmptyNodeValue: '',
    transSupportBasicHtmlNodes: true,
    transKeepBasicHtmlNodesFor: ['br', 'strong', 'i'],
    useSuspense: true,
  },
});

export default i18n;

resources에 국, 영문 콘텐츠를 넣어도 되지만, 일반적으로 사이트에 들어가는 콘텐츠의 양이 많고 하나의 파일에 너무 많은 정보가 들어가면 복잡하기 때문에 관리의 편의성을 위하여 각 언어 파일을 분리했습니다. index.js에서 기본 언어를 설정, 디버그 모드 설정 등 필요한 세팅을 적용해줍니다.

각 언어 파일(translation.en.json, translation.ko.json)에서는 json 형식에 맞춰 "key": "value" 형태로 콘텐츠를 넣어줍니다. 두 파일의 키는 반드시 동일해야 합니다.

// translation.en.json
{
  "top": {
    "title": "This is Title",
    "desc": "This is Description"
  }
}

//  translation.ko.json
{
  "top": {
    "title": "타이틀",
    "desc": "디스크립션"
  }
}

3. 컴포넌트에 다국어 적용하기

useTranslation hook을 import하고, 컴포넌트 내에서 t 함수를 가져옵니다. 다국어 콘텐츠 적용이 필요한 영역에, t 함수를 사용하여 다국어 파일에서 작성한 키값을 구조에 맞게 넣어줍니다.

import { useTranslation } from 'react-i18next';

const Component = () => {
  const { t } = useTranslation(); // t 함수 가져오기

  return (
    <div className="contents-wrap">
      <h1>{t('top.title')}</h1>
      <p>{t('top.desc')}</p>
    </div>
  );
};

기본 언어를 ‘en’으로 설정했기 때문에, 최초 렌더링 시 아래와 같이 영문 텍스트가 나옵니다.

내가 선택한 언어에 따라 콘텐츠가 바뀌는 것을 확인할 수 있도록 언어 설정 버튼도 하나 만들어보겠습니다. useTranslation()에서 118n도 가져옵니다. i18n의 메서드 changeLanguage를 사용하여 언어를 바꿔보겠습니다.

import { useTranslation } from 'react-i18next';

const Component = () => {
  const { t, i18n } = useTranslation(); // t 함수, i18n 가져오기

  // 언어 변경 함수
  const handleLangChange = (lang) => {
    i18n.changeLanguage(lang);
  };

  return (
    <div className="contents-wrap">
      <h1>{t('top.title')}</h1>
      <p>{t('top.desc')}</p>
      <div className="button-wrap">
        <button
          type="button"
          onClick={() => {
            handleLangChange('en'); // 버튼 클릭 시 언어 변경 함수 호출
          }}
        >
          English
        </button>
        <button
          type="button"
          onClick={() => {
            handleLangChange('ko'); // 버튼 클릭 시 언어 변경 함수 호출
          }}
        >
          한국어
        </button>
      </div>
    </div>
  );
};

한국어 버튼을 클릭하면 아래와 같이 국문 콘텐츠가 노출되는 것을 확인할 수 있습니다.

마치며

이번 포스트에서는 react에서 다국어 설정하는 방법을 살펴보았는데요, i18n 패키지를 활용하면 간단한 설정으로 다국어를 적용할 수 있는 것을 알 수 있었습니다. 다음번에는 비슷한 듯 다른, next.js 환경에서 다국어 적용하는 방법에 대해 포스트 해보겠습니다.

읽어주셔서 감사합니다 🙇‍♀️

참고문서

react-18next documentation