(2023.05 기준) React-i18next 다국어 적용 초기 세팅하기

i18next로 버튼을 통해 뷰페이지의 표시되는 언어가 바뀌는걸 알아보겠습니다.

일목요연하게 필요한 부분만 보고  따라만 하면 적용은 할 수 있게 작성하겠습니다.

이해 하는건 따로 공식도큐먼트 보면서 하시길..

 

1단계 패키지 설치

프로젝트 터미널을 통해 라이브러리 설치부터 진행해보겠습니다

npm install i18next react-i18next

 

2단계 i18n.ts 파일 구성

// src/i18n.js
import i18n from "i18next";
import { initReactI18next } from "react-i18next";

const resources = {
    ko: {
        translation: {
            title: "안녕하세요!",
            message: "한국어로 작성된 내용입니다.",
        },
    },
    ja: {
        translation: {
            title: "こんにちは！",
            message: "日本語で書かれたコンテンツです。",
        },
    },
};

i18n.use(initReactI18next).init({
    resources,
    lng: "ko", // 초기출력언어
    interpolation: {
        escapeValue: false,
        debugger: true, //디버그 출력
    },
});

export default i18n;

resorce를 따로 분리하여 사용도 정리도 가능

init의 다양한 속성이 존재하니 공식도큐멘트에서 확인

 

 

3단계 app.js (최상단app파일)에 i18n.js 임포트

import "./i18n"; //i18n 루트 설정

 

 

4단계 컴포넌트에 적용

import React from 'react';
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('message')}</p>
    </div>
  );
}

export default MyComponent;

useTranslation의 props 인 t를 통해 

i18n.ts 에서 정의한 resources - (ko , ja ) - translation - (속성명 title , message ) 안에 작성한 번역구성요소를 위의 코드와 같이 호출 t('속성명') ;

 

위와같이 진행하면 초기 세팅안 언어로 출력이 됩니다

 

5단계 언어변경버튼 만들기

import React from 'react';
import { useTranslation } from 'react-i18next';

function LanguageSwitcher() {
  const { i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <button onClick={() => changeLanguage('ko')}>ko</button>
      <button onClick={() => changeLanguage('ja')}>jp</button>
    </div>
  ); 
}

export default LanguageSwitcher;

changeLanguage 함수를 이용해 i18n에 정의한 resource의 속성명을 통해 지정하여 버튼을 누를시 그에 맞는 언어가 나올 수 있게 세팅 할 수 있다.

 

일단은 기본적인 세팅은 여기까지이고 자신의 입맛과 프로젝트에 따라 코드를 분리를 할 수 있고 원하는 형태로 만들 수 있다.

 

일단 라이브러리가 작동이 될 수 있는데까지 초기세팅은 완료