i18next는 자바스크립트에서 국제화 프레임워크로 쓰인다.
그리고 Node.js, PHP, iOS, Android 및 기타 플랫폼과 함께 i18next를 사용할 수도 있다.
라고 i18next 홈페이지에 설명이 되어있습니다.
웹 프로젝트에서 react-i18next로 다국어 적용을 해본 경험으로 react-i18next의 사용법을 설명하려합니다.
프로젝트에 yarn 이나 npm으로 react-i18next 패키지를 설치합니다.
설치 전 필요한 패키지를 미리 설치해줍니다.
# npm
npm install react-i18next --save
# yarn
yarn add react-i18next
설치 후 아래의 방법으로 프로젝트에서 사용합니다.
import React from "react";
import ReactDOM from "react-dom";
import i18n from "i18next";
import { useTranslation, initReactI18next } from "react-i18next";
i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
resources: {
en: {
translation: {
"Welcome to React": "Welcome to React and react-i18next"
}
}
},
lng: "en",
fallbackLng: "en",
interpolation: {
escapeValue: false
}
});
function App() {
const { t } = useTranslation();
return <h2>{t('Welcome to React')}</h2>;
}
// append app to dom
ReactDOM.render(
<App />,
document.getElementById("root")
);
위의 소스에서 i18n.init 안의 resources 부분에 사용할 언어의 키와 번역될 키 값, 해당하는 값을 적어서 번역할 부분에서
...<h2>{t('Welcome to React')}</h2>
위와 같은 방식으로 미리 지정한 키를 적어 사용해주시면 됩니다.
번역될 내용이 많을땐 resources를 따로 파일로 분리시켜 import하여 사용합니다.
다른 페이지나 컴포넌트에서 사용할 땐 props로 받아 사용하면 됩니다.
아래는 component 연결 사용입니다.
...
import { withTranslation } from 'react-i18next';
....
const Comp = (props) => {
const { t } = props;
...
{t('key')}
...
}
export withTranslation()(Comp)
참고 - http://i18next.com/, https://react.i18next.com/, https://github.com/i18next/react-i18next