i18next란 무엇일까

블로그-썸네일-006 크게

글로벌 웹/앱은 국제화(i18n)가 필수입니다.

현재 필자가 개발하고 있는 ‘글로벌 무신사’는 3개 국어(영어, 일어, 베트남어)를 지원하는 글로벌 웹/앱입니다. 따라서 i18next을 사용하여 다국어 서비스를 제공하고 있습니다. 정확히는 react-i18next 라이브러리를 함께 사용하고 있습니다.

i18next에 대해 따로 공부하지 않았지만 코드의 흐름으로 유추해 보기에 ‘키를 통해 번역 문구에 접근해서 사이트에 띄워주는 역할’을 수행하는 툴 이라고 생각했습니다. 이 또한 어느 정도 맞는 말이긴 하지만, 제대로 된 지식과 활용 방법을 알아둬야 할 필요가 있다고 생각했습니다. 따라서 이 글을 작성합니다.

i18next

i18next를 공식 홈페이지에서는 ‘internationalization-framework written in and for JavaScript’라고 소개하고 있습니다. 즉 한국어로 번역하면 ‘JavaScript 언어로 작성된 국제화 프레임워크’입니다.

i18next는 다음과 같은 역할을 수행합니다.

사용자 언어 감지
번역 로드
선택적 번역 문구 캐싱 기능

시작하기

다음의 명령어로 i18next를 다운받을 수 있습니다.

# npm
$ npm install i18next --save

# yarn
$ yarn add i18next

사용 방법

기본 사용법은 다음과 같습니다.

import i18next from "i18next";

// NOTE : 초기화 과정
i18next.init({
  lng: "en", // 번역이 되길 원하는 언어를 작성합니다 -> return 'string' 함수도 가능
  debug: true,
  resources: {
    // 번역 문구들
    en: {
      translation: {
        "translation Key": "hello world",
      },
    },
  },
});

// NOTE : 번역 문구 사용 과정
i18next.t("translation Key"); // 'hello world' 사용 가능

react-i18next

필자는 React 라이브러리를 사용한 프로젝트에서 i18next를 활용했는데, react-i18next 프레임워크를 함께 활용했습니다. (Supported Frameworks)

시작하기

다음의 명령어로 i18next와 react-i18next를 함께 다운받을 수 있습니다.

# npm
$ npm install react-i18next i18next --save

사용 방법

가장 간단한 사용 방법은 다음과 같습니다.

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

// NOTE : 초기화 과정
i18n.use(initReactI18next).init({
  lng: "en", // 번역이 되길 원하는 언어를 작성합니다 -> return 'string' 함수도 가능
  debug: true,
  resources: {
    // 번역 문구들
    en: {
      translation: {
        "translation Key": "hello world",
      },
    },
  },
  fallbackLng: "en",
  interpolation: {
    escapeValue: false,
  },
});

// NOTE : 번역 문구 사용 과정 (컴포넌트 내부라고 가정)
const { t } = useTranslation();
t(`translation Key`); // 'hello world' 사용 가능

react-i18next는 4가지 방법으로 i18n을 제공합니다.

useTranslation hook
withTranslation HOC
Translation render prop
Trans Component

필자는 주로 가장 대중적인 방법인 1번 useTranslation hook을 자주 사용합니다. 컴포넌트 안에서 일반 훅을 사용하듯이 손쉽게 번역 문구를 다룰 수 있습니다.

useTranslation hook

import { useTranslation } from "react-i18next";

const MyComponent = () => {
  const { t } = useTranslation();

  return (
    <div>
      <strong>{t(`translation Key`)}</strong>
    </div>
  );
};

export default MyComponent;

withTranslation HOC

다음과 같이 컴포넌트를 withTranslation으로 래핑하여 사용합니다.

import { withTranslation } from "react-i18next";

function MyComponent({ t, i18n }) {
  return <p>{t("translation Key")}</p>;
}

export default withTranslation()(MyComponent);

Translation render prop

import { Translation } from "react-i18next";

export function MyComponent() {
  return (
    <Translation>{(t, { i18n }) => <p>{t("translation Key")}</p>}</Translation>
  );
}

Trans Component

br, a 태그 같은 마크업이 섞여 있거나 변수를 포함한 번역이 필요할 때 Trans component를 사용할 수 있습니다.

import { Trans } from "react-i18next";

function MyComponent() {
  return (
    <Trans i18nKey="translation Key">
      Hello! <br />
      Your name is {{ userName }}.<br />
      Nice to meet you.
    </Trans>
  );
}

// ko 번역
{
  "translation Key": "안녕! <1/> 너의 이름은 {{ userName }}(이)구나. <5/>널 만나서 반가워.",
}

Trans Component안에 있는 문구는 총 7 파트로 나뉩니다.

Hello!
<br />
Your name is
{{ userName }}
.
<br />
Nice to meet you

이렇게 나누어진 파트의 인덱스에 따라 <index /> 형태로 접근할 수 있습니다.

안녕! <1/> 너의 이름은 {{userName}}(이)구나. <5/>널 만나서 반가워.
-> 안녕! <br /> 너의 이름은 {{userName}}(이)구나. <br />널 만나서 반가워.

언어 변경

‘en’으로 설정된 번역 언어를 바꾸기 위해서 i18next.changeLanguage() 메소드를 사용할 수 있습니다.

import i18next from "i18next";

// 예시 함수
const handleClickChangeLanguage = (lang: string) => {
  i18next.changeLanguage(lang);
};

예시 코드

어떤 디렉토리 구조던 큰 상관은 없지만 필자가 사용하고 있는 방법을 어느 정도 녹여내 구조를 설계해봤습니다.

i18n
 └─ src
     ├─ lang
     │    └─ translation
     │           ├─ en.js
     │           ├─ ko.js     // ... (등등의 번역 문구가 담긴 JS 파일)
     │           └─ index.ts  // export { en, ko }
     └─ index.ts

// src/index.ts
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import { en, ko } from "./lang/translation";

const resources = {
  en: { translation: en },
  ko: { translation: ko },
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en", // 또는 getLng()등의 함수 사용
  fallbackLng: "en",
  debug: false,
  keySeparator: false,
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

// src/lang/translation/ko.js
export default {
  button: {
    login: '로그인',
    logout: '로그아웃',
    move: '이동'
  }
  alert: {
    login: '로그인이 필요한 서비스입니다.',
    logout: '로그아웃 되었습니다.',
  }
  // ...
}

사용 방법은 다음과 같습니다.

import { useTranslation } from "react-i18next";

const Header = () => {
  const { t } = useTranslation("translation");

  // ... 코드 생략

  return (
    <div>
      <button onClick={handleClickLoginButton}>
        {t(`translation:button:login`)}
      </button>
      <button onClick={handleClickMoveButton}>
        {t(`translation:button:move`)}
      </button>
      {/* ... */}
    </div>
  );
};

export default Modal;

요약

i18next 프레임워크는 JavaScript로 작성된 국제화 도구입니다.
i18next는 사용자 언어를 감지하고 번역을 로드하며 번역 된 문구를 캐싱합니다.
react-i18next과 함께 사용하면 useTranslation 훅, withTranslation HOC, Translation render prop 및 Trans Component의 네 가지 방법을 통해 React에서 번역을 사용할 수 있습니다.
언어는 i18next.changeLanguage() 메소드를 사용하여 변경할 수 있습니다.

출처

https://www.i18next.com/

https://github.com/i18next

Twitter Facebook LinkedIn

i18next란 무엇일까

i18next

시작하기

사용 방법

react-i18next

시작하기

사용 방법

useTranslation hook

withTranslation HOC

Translation render prop

Trans Component

언어 변경

예시 코드

요약

출처

공유하기

댓글남기기

다른 게시글

[Depromeet] 디프만 14기 합격 후기

React Typescript 프로젝트 절대경로 설정하기

프론트엔드 웹 성능 최적화

주니어 개발자의 2022년 회고