react 위에서 i18next 적용하기

 

1. 라이브러리 설치

npm install i18next --save //i18next
npm install react-i18next i18next --save //react용 i18next
npm install i18next-browser-languagedetector //브라우저에서 사용자 언어를 감지

 

2. 각각의 언어 text를 담아줄 json 파일 만들어주기

src/asset/lang.en.json
src/asset/lang.ko.json

 

3. src/asset/i18n.js

i18n 초기 설정

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

import langEn from "./lang.en.json";
import langKo from "./lang.ko.json";

import LanguageDetector from "i18next-browser-languagedetector";

const resources = {
  en: langEn,
  ko: langKo,
};

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    whitelist: ["ko", "en"],
    fallbackLng: "en",
    debug: false,
    ns: ["translations"],
    defaultNS: "translations",
    interpolation: {
      escapeValue: false,
    },
    detection: {
      order: ["path", "navigator"],
    },
    react: {
      useSuspense: false,
    },
  });

export default i18n;

 

4. 초기 세팅이 끝났으면 .json 파일에 key, value를 적어준다.

 

key 는 jsx 안에 들어갈 값이고, value는 언어 상태에 따른 내용이다.

 

src/asset/lang.en.json

{
  "translations": {
    "nav": {
      "home": "About us",
      "service": "Our service",
      "recruit": "Career",
      "inquiry": "Support"
    },
}

src/asset/lang.ko.json

{
  "translations": {
    "nav": {
      "home": "회사 소개",
      "service": "서비스 소개",
      "recruit": "채용",
      "inquiry": "고객 문의"
    },
}

 

4-1) 이제 jsx 위에서 이렇게 적용한다

import { useTranslation, withTranslation } from "react-i18next";

const NavBar = (props) => {
	const { i18n } = useTranslation();
    
    return(
    	...
              <Nav.Link>
                {i18n.t("nav.inquiry")}
              </Nav.Link>
          
        ...
    
    )
}


export default withTranslation()(NavBar);

 

5. 라우터와 연동 시 (참고)

const NavBar = (props) => {

  const changeLanguage = (lng) => {
      i18n.changeLanguage(lng, () => {
        const newUrl = `/${lng}/${menuActive}`;
        // debugger;
        props.history.push(newUrl);
      });
    };
  
  ...
 return ( 
 ...
      <Nav.Link
        className="languageActive"
        onClick={() => changeLanguage("ko")}
        eventKey="ko"
      >
        KOR
      </Nav.Link>
      <div> | </div>
      <Nav.Link
        className="languageActive"
        onClick={() => changeLanguage("en")}
        eventKey="en"
      >
        ENG
      </Nav.Link>

      ...
   );
};

 

 

번외: 한영 어순이 다를 때.

 

<Trans> 컴포넌트를 사용하는 것을 권장하는 것 같지만 이걸 알았을 땐 돌이킬 수 없을 정도로 많은 유지 보수가 필요한 것 같아서 급한대로 삼항 연산자를 썼다. 최대한 낱말을 쪼개서 조건문에 따라 어순을 바꾸거나, 그것으로도 안 된다면 각 한영 json이 지니고 있는 key 값을 다르게 적용하여 따로 처리하는 방향으로 갔다.

 

...


	<div data-aos="fade-up" data-aos-duration="2000">
            {i18n.language === "ko" ? (
              <>
                <div className={styles.jumbotronTitle}>
                  <h1>
                    {i18n.t("companyInfo.jumboTitleFirst")}
                    <br></br>
                    <strong>{i18n.t("companyInfo.jumboTitleStrong")}</strong>
                    {i18n.t("companyInfo.jumboTitleLast")}
                  </h1>
                </div>
              </>
            ) : (
              <>
                <div className={styles.jumbotronTitleEng}>
                  <h1 className={styles.companyInfoTitleEng}>
                    {i18n.t("companyInfo.jumboTitleFirst")}
                    <br></br>
                    <strong>{i18n.t("companyInfo.jumboTitleStrong")}</strong>
                    {i18n.t("companyInfo.jumboTitleLast")}
                  </h1>
                </div>
              </>
            )}
          </div>


...