react-i18next를 이용하여 React로 개발한 웹 애플리케이션에서 다국어를 제공해보자!😀
// javascript
npm install react-i18next i18next
// typescript
npm install react-i18next @types/react-i18next i18next @types/i18next
-폴더를 만든 후 그안에 언어별로 json 및 i18n.ts 파일만들기.
{ "inputPlaceholder": "소환사명..." }
{ "inputPlaceholder": "YOUR SUMMONER NAME..." }
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;
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")} />
.....
)
}