React 다국어 제공하기

react-i18next를 이용하여 React로 개발한 웹 애플리케이션에서 다국어를 제공해보자!😀

#다국어 디자인 주의사항📌

1. 사용자가 번거롭지 않도록 쉽게 국가/언어를 변경할 수 있도록 해야한다.
2. 이미지에 텍스트가 없어야 한다. 그렇지 않으면 여러 개의 이미지를 준비해야 하기 때문에 작업이 번거로워 진다.
3. 일부 언어는 다른 언어로 작성될 때 더 길어질 수도 있으므로, 디자인에 레이아웃이나 오버 플로우 문제 발생에 주의해야 한다.
4. 국가별 날짜와 통화 형식에 유의한다.
5. 언어를 읽는 방향에 유의한다.
   
   

#react-i18next 사용하기📌

1. 설치하기

// javascript
npm install react-i18next i18next

// typescript
npm install react-i18next @types/react-i18next i18next @types/i18next

2. src/lang 폴더 및 파일만들기.

-폴더를 만든 후 그안에 언어별로 json 및 i18n.ts 파일만들기.

# lang.ko.json

{ "inputPlaceholder": "소환사명..." }

# lang.en.json

{ "inputPlaceholder": "YOUR SUMMONER NAME..." }

# i18n.ts

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

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

const resource = {
  en: {
    translations: langEn,
  },
  ko: {
    translations: langKo,
  },
  jp: {
    translations: langJp,
  },
};

i18n.use(initReactI18next).init({
  resources: resource,
  lng: "ko",
  //초기값
  fallbackLng: "ko",
  debug: true,
  defaultNS: "translations",
  ns: "translations",
  keySeparator: false,
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

3. 맛있게 사용하기

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

export const Search = ()=>{
  .....
  const { t } = useTranslation();
  const langChange = (lang: string) => {
    i18next.changeLanguage(lang);
  };
  return(
  	.....
    <h1 onClick={() => langChange("ko")}>Ko</h1>
     <h1 onClick={() => langChange("en")}>EN</h1>
    <input type="text" placeholder={t("inputPlaceholder")} />
    .....
  )
}