[react] 다국어 적용하기 - 1편 (feat.react-i18next)

1.  i18next 와 react-i18next 를 설치한다.

npm install i18next react-i18next

 

 

2. src 폴더 아래에 language 폴더를 생성하고 i18n.js 파일을 작성한다.

 

src/language/i18n.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "languages/en.json";
import ko from "languages/ko.json";

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: en,
      },
      ko: {
        translation: ko,
      },
    },
    lng: "ko-KR",
    fallbackLng: {
      "ko-KR": ["ko-KR"],
      default: ["en-US"],
    },
    debug: true,
    defaultNS: "translation",
    ns: "translation",
    keySeparator: false,
    interpolation: {
      escapeValue: false,
    },
    react: {
      useSuspense: false,
    },
  });

export default i18n;

 

3. language 폴더에 en.json 과 ko.json 파일을 작성한다.

 

src/language/en.js

{
  "testText" : "hello"
}

src/language/ko.js

{
  "testText" : "안녕하세요"
}

 

4. 사용할 컴포넌트에서 useTranslation 불러오기

 

src/Test.js

import { useTranslation } from "react-i18next";

const Login = () => {
  const { t } = useTranslation();
  return (
    <>
      <h2>{t("testText")}</h2>
    </>
  );
};

 

5. 결과물을 확인해보자 !

 

한국어 버젼

 

영어버젼

 

 

 

 

 

 

결과가 잘 적용되는 것을 확인할 수 있었습니다.

다음 포스트에서는 클릭시 언어 변경이 되는 버튼을 만들어 보겠습니다.

[react] 다국어 적용하기 - 2편 (언어 변경 버튼 만들기)