[typescript] react-i18next useTranslation 사용법

DApp 프로젝트 분석을 진행하던 중 다음과 같은 코드를 발견했다.

네비게이션바 컴포넌트를 특정하고, useTranslation hook 네임과 프로젝트 구조에 translation json 파일을 통해서 용어에 대한 번역을 반환한다고 쉽게 예상할 수 있었다.
하지만, 기존에 javascript 기반의 react 프로젝트에서 사용할 땐 단지 언어별 json 파일을 읽어서 객체를 반환했었다.
그래서 해당 프로젝트에서 어떻게 사용했는지 찾아봤다.

react-i18next

useTranslation을 찾아보니 다음과 같이 경로와 해당 함수를 확인했다.

// node_modules/react-i18next/ts4.1/index.d.ts

export function useTranslation<
  N extends Namespace = DefaultNamespace,
  TKPrefix extends KeyPrefix<N> = undefined
>(
  ns?: N | Readonly<N>,
  options?: UseTranslationOptions<TKPrefix>,
): UseTranslationResponse<N, TKPrefix>;

react-i18next는 다국어 번역을 관리하고 적용하기 위한 라이브러리라고 한다.

하지만, DApp 프로젝트에서 다국어 번역을 위한 파일은 translations/en.json 파일로 존재하고 있다.
따라서, react-i18next 안에 있는 useTranslation 훅이 어떻게 프로젝트 translations/en.json 파일에 접근했는지 확인하고 다음과 같이 사용법을 정리했다.

다국어 처리를 위한 json 파일 생성

// translations/en.json
{
  "nav": {
    "swap": "Swap",
    "transactions": "Transactions",
    "connect": "Connect Wallet",
  }
}

다국어 번역 처리를 위한 en.json 파일을 위와 같이 생성한다.

i18n.ts 파일 생성

useTranlsation 훅을 사용할 컴포넌트와 translations json 파일과 맵핑하기 위한 i18n.ts 파일을 다음과 같이 생성한다.

// i18n.ts

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import { default as enTranslations } from "./translations/en.json";

const DEFAULT_NAMESPACE = "translation";

const en = { [DEFAULT_NAMESPACE]: enTranslations };

i18n.use(initReactI18next).init({
  resources: {
    en,
  },
  lng: "en",
  fallbackLng: "en",
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

useTranslation hook 사용

다국어 번역 처리 사용이 필요한 파일에서 다음과 같이 useTranslation 훅을 선언한다.

import { useTranslation } from "react-i18next";

const { t } = useTranslation();

i18n.ts 파일을 통해 useTranslation에 json 파일이 맵핑되어 다음과 같이 사용할 수 있다.

// translations/en.json
//{
//  "nav": {
//    "swap": "Swap",
//  }
//}

{t("nav.swap")}
// {"Swap"}