react-i18next 사용기(번역)

i18next

i18next는 자바스크립트에서 국제화 프레임워크로 쓰인다. Node.js, PHP, iOS, Android 및 기타 플랫폼과 함께 i18next를 사용할 수도 있다.

설치법

npm install react-i18next --save

설치후 세팅하기

React+TypeScript 환경 기준으로 설명을 해보겠다.
우선 Package.json에 react-i18next & i18next 가 깔렷는지 확인한다.

각 폴더 및 파일을 소개하고 설명해보겠다.
./src
├── i18n.d.ts
├── App.tsx
├── components
├── index.tsx
├── locales
│ ├── en
│ │ ├── page.json
│ └── ko
│ ├── page.json
필자는 이 형식으로 폴더를 만들었는데 다른 블로그 글들을 살펴보면 더 자세히 나누고 무언가 더 넣으셧는데 나는 이해하지 못해서 그나마 작동시킬수 있는 형태로 사용하였다.

i18n.d.ts

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

import en from "./locales/en/page.json";
import ko from "./locales/ko/page.json";

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: en,
    },
    ko: {
      translation: ko,
    },
  },
  lng: "ko", // 기본 언어 설정 (한국어)
  fallbackLng: "ko", // 번역이 없는 경우의 기본 언어 설정
  debug: true,
  interpolation: {
    escapeValue: false, // React 컴포넌트와의 통합을 위해 false로 설정
  },
});

export default i18n;

src폴더에 i18n.d.ts 파일을 만들어서 이렇게 작성해주었다.
설명을 드리면 이 후에 만들 locales폴더 안에 있는 json 파일들을 불러와서 resource에 넣어주고 기본언어 설정, 디버그 등을 해주면 된다.

locales

locales에는 ko, en폴더가 각각 있고 그 안에 page.json이 각각 있다.
json파일안에 이제 key : value를 입력해준다.
ex)

// ko
{
	"velog" : "벨로그",
    "write" : "글쓰기"
}

// en
{
	"velog" : "velog",
    "write" : "write"
}

이런식으로 key값에 들어갈 value들을 지정해주면 된다.
번역할 텍스트의 규모가 크면 json파일도 컴포넌트에 따라 나누어도 된다.

index.tsx

src의 index.tsx에

import "./i18n";

을 넣어서 가져와주자

컴포넌트에서의 사용

이제 세팅을 마쳣으니 사용을 해보겠다.
번역이 필요한 텍스트가 있는 컴포넌트로 이동하여

import { useTranslation } from "react-i18next";

한뒤에 function 혹은 class 안에

const { t } = useTranslation();

를 지정해준다.
그리고 번역을 원하는 텍스트에 {t("key")} 이 형식으로 가져오면 되는데 위에 예를 들어서 적어보자면 {t("velog")}, {t("write")} 이런식으로 적을 수 있겟다.
그럼 그 안에 있는 value가 사용자의 언어에 따라 맞춰서 번역되어서 나온다.
이러면 이제 ko, en 이 적용이 된것인데 나는 확인을 해보고 싶어서 브라우저에서 언어도 바꾸어보고 i18in.d.ts 파일에서 lng: "ko" 를 en으로도 바꾸어 보았다.

일단 이렇게라도 작동해서 이렇게 사용했지만 더 나은 사용법이 있을 수 있기에 더 찾아보면 좋을듯 ( 타입지정도 안한거 같고 ... )