[React] React 다국어 지원 라이브러리 react-i18next - JSON 으로 관리

다국어 지원 프로젝트를 진행하기 위하여 React에서 다국어 지원을 해주는 라이브러리를 설치해보자. 

 

react-i18next

react-i18next는 React 와 React Native에서 사용할 수 있는 국제화 프레임 워크이다. 

 

react-i18next를 사용하여 다국어 지원 프로젝트를 만들기로 했다. 

npm install react-i18next i18next —- save
yarn add react-i18next i18next —- save

- react-i18next : react와 함께 사용할 수 있는 기능

- i18next : 다국어 핵심 기능

 

구조는 src/utils/locale 에다가 i18n.js 라는 파일을 만들어 아래와 같이 작성하였다. 

파일 위치 및 구조

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translateKo from "./translateKo.json";
import translateEn from "./translateEn.json";

// 국가 코드와 JSON 파일 매칭
const resource = {
  ko : {
    translation : translateKo, // 파일명
  },
  en: {
    translation : translateEn,
  }
}

i18n.use(initReactI18next).init({
  resources: resource,
  lng: "ko", // default 국가 코드
  debug: true,
  keySeparator: false,
  interpolation: { escapeValue: false },
});

// 로컬스토리지에 저장된 언어 값이 있다면 불러온다.
let language = localStorage.getItem("language");
if (language !== null) {
  i18n.changeLanguage(language);
}

// 국가 코드를 변경하는 함수
export function changeLanguage() {
  i18n.changeLanguage(i18n.language === "ko" ? "en" : "ko");
  // 브라우저 DB에 기록
  localStorage.setItem("language", i18n.language);
}

export default i18n;

 

작성한 파일은 App.js 에다가 import 하였다. 

import "../src/utils/locale/i18n"; // 다국어 지원

function App() {
	...
}

 

 

실제로 잘 번역이 되는지 확인을 해보기 위하여 hook 형태로 사용할 수 있는 useTranslation을 사용해본다.

import { useTranslation } from "react-i18next";

const Dashboard = () => {
  const { t } = useTranslation();

  return (
    <>
      {t(`test.key`)}
    </>
  )
}

export default Dashboard;

각 json 파일에 키 값에 해당하는 언어를 입력한다.

 

화면에 성공적으로 잘 표시가 된다.

 

json으로 관리하는 방법과 google sheet로 관리하는 방법 두 가지에서 고민했다.

연동하는게 귀찮아서 json으로 먼저 작업을 하였으나 여러 사람이 작업을 할 때에는 역시 구글 시트가 편할테니 애써 귀찮아서 쉽게 가려고 하다가 구글 시트로도 작업을 하기로 했다. 

다음 글에 구글 시트로 작업하는 것을 정리할 예정이다. 

 

참고블로그

https://all-dev-kang.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B8%80%EB%A1%9C%EB%B2%8C%ED%95%9C-%EC%9B%B9%EC%9D%84-%ED%96%A5%ED%95%98%EC%97%AC-react-i18n-%EB%8B%A4%EA%B5%AD%EC%96%B4%EC%A7%80%EC%9B%90#%EB%93%A4%EC%96%B4%EA%B0%80%EB%A9%B0

[리액트] 글로벌한 웹을 향하여 (react-i18next, 다국어지원)