React에서 다국어 기능 추가하기(번역 기능) - i18next

react로 프로젝트를 하던 중 다국어 기능이 필요하여 적용했던걸 정리해보려 한다.

react-i18next 라는 라이브러리를 많이 사용하길래 이것으로 적용했다.

 

 

우선 npm으로 설치를 한다.

npm install react-i18next --save

*** 사용자가 설정한 언어를 다음에도 적용시키고 싶을때에는 아래것으로 설치!! 나는 이걸로 설치했다.

npm install i18next react-i18next i18next-browser-languagedetector

그럼 이제 모듈에 추가가 되었을것이다.

 

다음 할 일은 json 파일에 데이터를 미리 넣어두는 것이다.

(데이터가 많으면 json 파일로 만들어서 쓰는게 좋지만 한두개라면 i18n.js 파일부분 부터 보면 된다.)

폴더 구조는 진행하는 프로젝트에 맞게 설정하면 된다.

나는 원래 있던 js폴더에  i18n.js를 만들고,

locales 폴더를 추가하여 en.json, ko.json 파일을 만들었다.

먼저, json 파일부터 살펴보자면

ko.json

{
  "부동산" : "부동산"
}​

en.json

{
  "부동산" : "real estate"
}

*** 여기서 포인트는 key 값이 동일해야 한다!

     여기서는 왼쪽의 "부동산"이 key 값이므로 한국어와 영어 json 파일에 동일한것을 볼 수 있다.

 

여기까지했으면 이제 i18n.js를 작업해야한다.  (위에 말한 i18n.js 파일 부분)

i18n.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector"; // 설치 안했으면 import 안해도 됨
import translationKo from "./locales/ko.json";   // 구조는 알맞게 설정, json 파일 안쓸시 필요 없음
import translationEn from "./locales/en.json";   // 구조는 알맞게 설정, json 파일 안쓸시 필요 없음

// 저장한 json 데이터를 미리 저장
const resources = {
  ko: {
    translation: translationKo
  },
  en: {
    translation: translationEn
  },
}

// LanguageDetector를 사용함으로써 설정 언어로 다음에도 유지시켜줌
// json 파일로 사용할 시
i18n.use(LanguageDetector).use(initReactI18next).init({
  resources, // 위에 설정한 상수 선언
  fallbackLng: "ko",  // 번역 key를 못찾을 경우 참고할 언어 설정
  // lng: "ko",  // 기본 언어 설정(나는 LanguageDetector을 사용해서 안씀)
  interpolation: { 
    escapeValue: false 
  },
});

// json 파일 아니고 몇개만 번역할 시
i18n.use(LanguageDetector).use(initReactI18next).init({
  resources: { 
      en: {
        translation: { 
          부동산: "real estate",
        },
      },
      ko: {
        translation: {
          부동산: "부동산",
        },
      },
  },
  fallbackLng: "ko",  
  // lng: "ko",
  interpolation: { 
    escapeValue: false 
  },
});

export default i18n;

여기까지면 이제 거의 끝나간다.

방금 만든 i18n.js를 index.js에 import 시켜준다.

이제 버튼 클릭시 언어가 바뀔 수 있게 설정하러 가본다~~

나는 다국어 기능의 버튼이 header 컴포넌트에 있어서 거기서 우선 버튼을 누를 시 바뀔 수 있게 설정해주었다.

우선 header 컴포넌트에 i18n으로 import 시켜주고

import i18n from 'i18next';

 // 다국어 기능  
  function changeKR() {
    i18n.changeLanguage("ko");
  }
  function changeEn() {
    i18n.changeLanguage("en");
  }

위처럼 함수를 만들어서

아래처럼 적용 시켰다.

그리고 이제 최종으로!! 번역이 필요한 파일로 가서

위처럼 useTranslation를 import 시켜주고 상수 설정을 해준다.

필요한 번역 부분에

이렇게 설정해 두면

영어 설정일 때

한국어 설정일 때

완성되었다~~~

 

 

*** 참고로 영어/한글일 때 화면이 어디가 달라지거나 세팅을 해야할 때에는 

해당 파일에 i18next를 import 하고
i18n.language로 조건문을 써서 아래 예시처럼 사용할 수 있다.

import i18n from 'i18next';

 if(i18n.language === "en") {
      document.querySelector('.gnb_nav_menu_button.lang').innerText = "ENG";
 }