React에 다국어 지원 추가

Source: Dev.to

React 프로젝트에 다국어 지원을 추가하려면 react‑i18next를 사용할 것입니다. 이 라이브러리는 i18next 위에 구축되었습니다.
이 라이브러리는 언어가 변경될 때 자동으로 번역된 콘텐츠를 렌더링하는 컴포넌트를 제공하며, Angular, Vue 등 모든 UI 프레임워크와 함께 사용할 수 있습니다.

문서:

1. 필요한 패키지 설치

npm install i18next react-i18next i18next-browser-languagedetector i18next-xhr-backend

2. i18n 설정 파일 만들기

src 폴더에 i18n.js 라는 파일을 만들고 아래 코드를 붙여넣으세요:

// src/i18n.js
import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import Backend from "i18next-xhr-backend";
import { initReactI18next } from "react-i18next";

const fallbackLng = ["en"]; // default language

i18n
  .use(Backend)               // loads translation files
  .use(LanguageDetector)       // detects the user language
  .use(initReactI18next)       // passes i18n instance to react-i18next
  .init({
    fallbackLng,
    detection: {
      checkWhitelist: true,
    },
    debug: false,
    interpolation: {
      escapeValue: false, // React already escapes values
    },
    // If you store translations somewhere else, configure the path here:
    // backend: {
    //   loadPath: "/assets/locale/{{lng}}/translation.json",
    // },
  });

export default i18n;

Note: App.js(또는 루트 컴포넌트)에서 설정을 한 번만 실행되도록 import 합니다:

import "./i18n";

3. 번역 파일을 위한 폴더 구조

public/
└─ locale/
   ├─ en/
   │  └─ translation.json
   └─ fr/
      └─ translation.json

public/locale/en/translation.json

{
  "hello": "Hello",
  "cancel": "Cancel",
  "continue": "Continue"
}

public/locale/fr/translation.json

{
  "hello": "Salut",
  "cancel": "Annuler",
  "continue": "Continuez"
}

다른 위치(예: assets/locale)를 선호하는 경우 i18n.js에서 backend.loadPath 옵션을 다음과 같이 조정합니다:

backend: {
  loadPath: "/assets/locale/{{lng}}/translation.json",
},

4. 컴포넌트에서 번역 사용하기

useTranslation 훅이 제공하는 것:

• t – 키로 번역을 가져오는 함수.
• i18n – changeLanguage()를 제공하는 i18next 인스턴스.

예시: 언어 선택 컴포넌트

// src/components/LanguageSelector.tsx
import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import { GlobeAltIcon } from "@heroicons/react/24/outline";
import { useTranslation } from "react-i18next";

function classNames(...classes: string[]) {
  return classes.filter(Boolean).join(" ");
}

const countries = [
  { code: "fr", name: "Français", country_code: "fr" },
  { code: "en", name: "English", country_code: "gb" },
];

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

  return (
    <Menu as="div" className="relative inline-block text-left">
      {/* ... UI markup ... */}
      {countries.map((lng) => (
        <Menu.Item key={lng.code}>
          {({ active }) => (
            <button
              className={classNames(
                active ? "bg-gray-100" : "",
                "block w-full text-left px-4 py-2 text-sm"
              )}
              onClick={() => i18n.changeLanguage(lng.code)}
            >
              {/* You could add a flag icon using lng.country_code here */}
              {lng.name}
            </button>
          )}
        </Menu.Item>
      ))}
    </Menu>
  );
};

이제 UI 어디서든 t 함수를 사용할 수 있습니다:

import { useTranslation } from "react-i18next";

export const Greeting = () => {
  const { t } = useTranslation();

  return <h1>{t("hello")}!</h1>;
};

선택기를 통해 언어를 전환하면 t를 사용하는 모든 컴포넌트가 즉시 다시 렌더링됩니다.

5. 요약

1. i18next, react‑i18next, 그리고 헬퍼 플러그인을 설치합니다.
2. i18n.js에서 i18next를 초기화하고 한 번만 가져옵니다(예: App.js에서).
3. 번역 파일을 public/locale/<lng>/translation.json에 저장합니다.
4. useTranslation을 사용해 번역(t)을 가져오고 언어를 변경합니다(i18n.changeLanguage).

이제 완전한 다국어 React 애플리케이션이 준비되었습니다! 🚀

언어 선택기 컴포넌트 (대체 구현)

import { Menu, Transition } from "@headlessui/react";
import { Fragment } from "react";
import { useTranslation } from "react-i18next";

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

  const languages = [
    { code: "en", name: "English", country_code: "gb" },
    { code: "fr", name: "Français", country_code: "fr" },
    // add more languages as needed
  ];

  return (
    <>
      <Menu as="div" className="relative inline-block text-left">
        {/* ... UI markup ... */}
        {languages.map((lng) => (
          <Menu.Item key={lng.code}>
            {({ active }) => (
              <button
                className={active ? "bg-gray-100" : ""}
                onClick={() => i18n.changeLanguage(lng.code)}
                disabled={i18n.language === lng.code}
              >
                {lng.name}
              </button>
            )}
          </Menu.Item>
        ))}
      </Menu>
    </>
  );
};

export default LanguageSelector;

작동 방식

드롭다운은 언어 옵션과 해당 국가 플래그를 함께 표시합니다. 사용자가 언어를 선택하면 i18n.changeLanguage(languageCode)가 호출되어 애플리케이션 전체의 언어가 업데이트됩니다.

샘플 폼 컴포넌트

아래는 react‑i18next의 t 함수를 사용하여 현지화된 라벨을 렌더링하는 간단한 컴포넌트입니다.

import ModuleContainer from "components/shared/moduleContainer/ModuleContainer";
import { useTranslation } from "react-i18next";

function SampleForm() {
  const { t } = useTranslation();

  return (
    <ModuleContainer>
      <label>{t("hello")}</label>
      <button>{t("cancel")}</button>
    </ModuleContainer>
  );
}

export default SampleForm;

LanguageSelector를 통해 언어를 선택하면 t 함수가 각 키("hello", "cancel" 등)에 대해 자동으로 적절한 번역을 반환합니다. 이 방법을 사용하면 React 애플리케이션 전반에 걸쳐 지원되는 모든 언어로 라벨과 메시지를 렌더링할 수 있습니다.

도움이 되셨다면 구독, 박수, 좋아요, 그리고 공유를 자유롭게 해 주세요. 감사합니다!