[TIL]22.03.21- react-i18next, 언어모드

 

react-i18next

글로벌을 무대로 서비스하는 웹 애플리케이션은 국제화(i18n)가 필수다. 이를 해결하기 위해  반복적인 코드나 조건부렌더링으로 하드코딩할 수는 있지만 비효율적이다. react환경에서는 react-i18next를 설치하면 좀더 쉽게 해결이 가능하다.

 

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

 

useTranslation (hook)

언어별 json파일을 만들어 두고

useTranslation훅으로 t function을 활용해 key을 활용하여 원하는 텍스트를 번역할수 있다.

import React from 'react';
import { useTranslation } from 'react-i18next';


export function MyComponent() {
  const { t, i18n } = useTranslation();
  // or const [t, i18n] = useTranslation();

  return <p> {t(`videos.label`)</p>
}

 

"videos": {
        "label": "videos",
        "content": "Number of videos created",
        "unit": " "
      },