[React] i18n 사용법 / 다국어 번역 기능 구현하기

React & typescript 이용 프로젝트에서 번역 기능을 구현해달라는 요청이 들어왔다.

google translate를 이용해서 페이지 전체를 자동 번역하는 방법을 사용해도 된다 했으나

google translate는 기본 구글 제공 형태에서 커스텀이 쉽지 않고 select box로만 가능!

내가 진행하는 프로젝트에서는 번역이 버튼 형태로 구현되어야 했음

찾아보니 i18n을 이요해 직접 하나하나 번역하는 것이 국룰인것 같았다.

폴더 생성

• 일단 src 폴더 내에 locale폴더를 만들어주었고 번역기능을 진행할 ts파일과 한국어 json파일, 영어 json파일을 만들어줌

i18n.ts

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translationEn from './trans.en.json'
import translationKo from './trans.ko.json'


const resource =  {
    en: {
        translation: translationEn
    },
    ko: {
        translation: translationKo
    }
};

i18n
    .use(initReactI18next)  // passes i18n down to react-i18next
    .init({
        resources: resource,
        lng: "ko",
        fallbackLng: 'ko',
        // ns: ['translation'],
        // defaultNS: "translation",
        debug: false,
        keySeparator: false, // we do not use keys in form messages.welcome
        interpolation: {
            escapeValue: false // react already safes from xss
        }
    });
export default i18n;

• i18n.ts 파일에서 언어를 설정해준다.
  
  

json파일 예시

//한국어 파일
{
        "modify":"수정",
        "completion":"완료",
        "cancle":"취소",
        "check":"확인",
        "next":"다음",
}

//영어 파일
{
    "modify":"modify",
    "completion":"completion",
    "cancle":"cancle",
    "check":"confirm",
    "next":"next",
}

• 이런식으로 프로젝트 내의 모든 텍스트를 json파일에 옮겨주었다.

적용하기

App.tsx

const App = () => {
  const lang = localStorage.getItem("lang");

  const changeLanguage = (lang: string) => {
    i18next.changeLanguage(lang);
  };

  useEffect(() => {
    if (lang === "english") {
      changeLanguage("en");
    } else {
      changeLanguage("ko");
    }
  }, []);
}

• 나는 번역 버튼을 눌렀을때 해당 언어를 localstorage에 저장하고, app.tsx에서 changeLanguage를 실행시켜주는 방식으로 진행하였다.
• 번역 기능은 i18next.changeLanguage() 를 이용한다. ("ko"는 한국어, "en"는 영어)

컴포넌트,페이지.tsx

const { t } = useTranslation();

...

<span>{t("tile1")}</span>

• 파일 상단에 t를 선언하고
• 텍스트가 필요한 부분에 t("json파일에 선언해 놓은 이름") 으로 사용해준다.