Next.js 없이 i18next와 react-i18next를 사용하여 다국어를 지원할 수 있다.
1. 패키지 설치
npm install react-i18next i18next i18next-http-backend i18next-browser-languagedetector
2. i18next 설정 파일 생성
src/에 i18n.ts 파일을 만들어 기본 설정을 추가한다.
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
i18n
.use(initReactI18next)
.init({
lng: "en", // 기본언어
fallbackLng: "en", // 언어가 없을 경우 대체 언어
debug: true,
interpolation: {
escapeValue: false, // React는 이미 XSS를 방지함
},
});
export default i18n;
3. i18n 설정을 React 애플리케이션에 적용한다
index.js 또는 App.js에서 i18n 설정을 불러온다
// App.tsx
import "./i18n";
4. 번역 파일 준비
프로젝트의 public/locales 폴더에 번역 파일을 생성한다.
5. 컴포넌트에서 사용한다
한국어, 영어 변경하기
en, ko 버전의 json을 만들어 주었다.
// public/locales/en/translation.json
{
"hi": "hi",
}
// public/locales/ko/translation.json
{
"hi": "안녕하세요",
}
i18n 설정
만들은 json을 불러오고 기본적인 설정을 해주었다.
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import enTranslations from "../public/locales/en/translation.json";
import koTranslations from "../public/locales/ko/translation.json";
i18n
.use(initReactI18next)
.init({
lng: "en", // 기본언어
fallbackLng: "en", // 언어가 없을 경우 대체 언어
debug: true,
interpolation: {
escapeValue: false, // React는 이미 XSS를 방지함
},
resources: {
en: {
translation: enTranslations,
},
ko: {
translation: koTranslations,
},
},
});
export default i18n;
사용할때는 useTranslation 훅을 사용해준다
// Component.tsx
import { useTranslation } from "react-i18next";
const Component = () => {
const { t, i18n } = useTranslation();
return (
<>
<h1>{t("hi")}</h1>
<button onClick={() => i18n.changeLanguage("ko")}>한국어</button>
<button onClick={() => i18n.changeLanguage("en")}>English</button>
</>
)
}
여러 json 파일 만들기
기본 translation.json 외에 common.json을 만들어서 관리하고 싶었다.
/public/en 에 밑의 새로운 json을 추가하고
// common.json
{
"appName": "My App",
"welcome": "Welcome to React",
}
이를 사용하기 위해 i18n설정을 변경해줬다.
json들을 읽어올 경로를 지정하고, 추가한 json의 이름을 네임스페이스에 추가했다.
// i18n.ts
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-http-backend";
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
lng: "en",
fallbackLng: "en",
debug: true,
interpolation: {
escapeValue: false,
},
// 리소스 로딩 옵션
backend: {
loadPath: "/locales/{{lng}}/{{ns}}.json", // 번역 파일 경로 지정
},
ns: ["translation", "common"], // 사용할 네임스페이스 지정
defaultNS: "translation", // 기본 네임스페이스 지정
});
export default i18n;
컴포넌트에서 사용할 때는 useTranslation에 ["common"] 배열을 전달하여 common 네임스페이스를 로드하도록 설정하고
네임스페이스:key 형식으로 작성하여 렌더한다.
// Component.tsx
import { useTranslation } from "react-i18next";
const Component = () => {
const { t } = useTranslation();
// const { t } = useTranslation(["common"]);
return <h2>{t("common:appName")}</h2>
}
중첩된 구조의 json파일 사용하기
json형식이 아래와 같이 중첩이 되면 어떻게 사용할 수 있을까?
// common.json
{
"appName": "My App",
"welcome": "Welcome to React",
"a": {
"b": "good morning"
}
}
네임스페이스:key.key 형식으로 출력할 수 있다.
// Component.tsx
import { useTranslation } from "react-i18next";
const Component = () => {
const { t } = useTranslation();
return <h2>{t("common:a.b")}</h2>
}
'React' 카테고리의 다른 글
리액트가 선언형 프로그래밍인 이유? (0) | 2024.05.03 |
---|---|
React로 채팅앱 구현 시 스크롤 맨 아래로 내리는 법 (0) | 2024.04.16 |
[React] TTF, OTF 폰트 적용하기 (0) | 2023.12.05 |
Manifest: Line: 1, column: 1, Syntax error 에러 해결하기 (0) | 2023.12.04 |
CRA에서 .less파일 사용하기 (0) | 2023.10.30 |