React에서 다국어 지원하기

 

Next.js 없이 i18next와 react-i18next를 사용하여 다국어를 지원할 수 있다.

1. 패키지 설치

npm install react-i18next i18next i18next-http-backend i18next-browser-languagedetector​

 

2. i18next 설정 파일 생성

src/에 i18n.ts 파일을 만들어 기본 설정을 추가한다.

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

i18n
  .use(initReactI18next)
  .init({
    lng: "en", // 기본언어
    fallbackLng: "en", // 언어가 없을 경우 대체 언어
    debug: true,
    interpolation: {
      escapeValue: false, // React는 이미 XSS를 방지함
    },
  });

export default i18n;​

 

3. i18n 설정을 React 애플리케이션에 적용한다

index.js 또는 App.js에서 i18n 설정을 불러온다

// App.tsx

import "./i18n";

 

4. 번역 파일 준비

프로젝트의 public/locales 폴더에 번역 파일을 생성한다.

5. 컴포넌트에서 사용한다

 

 

---

 

 

한국어, 영어 변경하기

en, ko 버전의 json을 만들어 주었다.

// public/locales/en/translation.json
{
  "hi": "hi",
}

// public/locales/ko/translation.json
{
  "hi": "안녕하세요",
}

 

 

i18n 설정

만들은 json을 불러오고 기본적인 설정을 해주었다.

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import enTranslations from "../public/locales/en/translation.json";
import koTranslations from "../public/locales/ko/translation.json";

i18n
  .use(initReactI18next)
  .init({
    lng: "en", // 기본언어
    fallbackLng: "en", // 언어가 없을 경우 대체 언어
    debug: true,
    interpolation: {
      escapeValue: false, // React는 이미 XSS를 방지함
    },
    resources: {
      en: {
        translation: enTranslations,
      },
      ko: {
        translation: koTranslations,
      },
    },
  });

export default i18n;

 

사용할때는 useTranslation 훅을 사용해준다

// Component.tsx
import { useTranslation } from "react-i18next";

const Component = () => {
    const { t, i18n } = useTranslation();
    return (
    	<>
          <h1>{t("hi")}</h1>
          <button onClick={() => i18n.changeLanguage("ko")}>한국어</button>
          <button onClick={() => i18n.changeLanguage("en")}>English</button>
        </>
    )
}

 

 

잘 바뀐다!

 

 

---

여러 json 파일 만들기

 

기본 translation.json 외에 common.json을 만들어서 관리하고 싶었다.

 

/public/en 에 밑의 새로운 json을 추가하고 

// common.json
{
  "appName": "My App",
  "welcome": "Welcome to React",
}

 

 

이를 사용하기 위해 i18n설정을 변경해줬다.

json들을 읽어올 경로를 지정하고, 추가한 json의 이름을 네임스페이스에 추가했다.

// i18n.ts
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-http-backend";

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    lng: "en",
    fallbackLng: "en",
    debug: true,
    interpolation: {
      escapeValue: false,
    },
    // 리소스 로딩 옵션
    backend: {
      loadPath: "/locales/{{lng}}/{{ns}}.json", // 번역 파일 경로 지정
    },
    ns: ["translation", "common"], // 사용할 네임스페이스 지정
    defaultNS: "translation", // 기본 네임스페이스 지정
  });

export default i18n;

 

 

컴포넌트에서 사용할 때는 useTranslation에 ["common"] 배열을 전달하여 common 네임스페이스를 로드하도록 설정하고

네임스페이스:key 형식으로 작성하여 렌더한다.

// Component.tsx
import { useTranslation } from "react-i18next";

const Component = () => {
    const { t } = useTranslation();
    // const { t } = useTranslation(["common"]);
    return <h2>{t("common:appName")}</h2>
}

 

잘 출력된다!

 

---

중첩된 구조의 json파일 사용하기

 

json형식이 아래와 같이 중첩이 되면 어떻게 사용할 수 있을까?

// common.json
{
  "appName": "My App",
  "welcome": "Welcome to React",
  "a": {
    "b": "good morning"
  }
}

 

 

네임스페이스:key.key 형식으로 출력할 수 있다.

// Component.tsx
import { useTranslation } from "react-i18next";

const Component = () => {
    const { t } = useTranslation();
    return <h2>{t("common:a.b")}</h2>
}