[react] 다국어 적용하기 - 3편 (다국어에 변수 넣기)

전 포스트에 이어서 작성하는 내용이므로 설치 및 다국어 적용이 안되신 분은 앞의 포스트를 보고 와 주세요!

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

 

1.  {t("testText", {넣을 변수명})}  으로 데이터를 넣는다.

 

src/Test.js

import i18n from "languages/i18n";
import { useTranslation } from "react-i18next";

const Login = () => {
  const { t } = useTranslation();
  const onChangeLang = () => {
    i18n.language === "ko"
      ? i18n.changeLanguage("en")
      : i18n.changeLanguage("ko");
  };
  const name = { ko: "홍길동", en: "mr.Hong" };
  
  return (
    <Container>
      <h2>{t("testText", {name})}</h2>
      <button onClick={() => onChangeLang()}>언어변경</button>
    </Container>
  );
};

 

2.  ko.json, en.json  커스텀해주기

 

src/languages/ko.json

{
  "testText": "{{name.ko}}님, 안녕하세요"
}

src/languages/en.json

{
  "testText": "Hello, {{name.en}}!"
}

 

3.  결과를 확인해보자!

 

변수가 잘 들어가는것을 확인할 수 있었습니다!