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

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

react 에서 다국어 적용하기 (feat.react-i18next)

 

 

1.  사용할 컴포넌트에서 i18n 불러오기

 

src/Test.js

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

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

 

2. 클릭 시 언어가 변경되는 버튼 만들기

 

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");
  };
  
  return (
    <Container>
      <h2>{t("testText")}</h2>
      <button onClick={() => onChangeLang()}>언어변경</button>
    </Container>
  );
};

 

3.  결과를 확인해보자!

 

 

 

버튼을 눌렀을 때 언어가 잘 변경되는 것을 확인할 수 있습니다.

다음 포스트에는 다국어에 변수를 넣는 방법을 확인해보겠습니다.

 

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