[react] 다국어 처리(i18n) - 클래스형 컴포넌트

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 페이지 번역
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translationKr from "./translation/kr/translation.json";
import translationEn from "./translation/en/translation.json";

i18n.use(initReactI18next).init({
    resources: {
        kr: translationKr,
        en: translationEn,
    },
    fallbackLng: "kr",
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><App /></React.StrictMode>);

 

index.js 파일에 다국어 처리를 위해 i18n 설정을 추가합니다.

 

 

import { withTranslation } from "react-i18next";

export class Home extends React.Component {
	...
}
export default withTranslation()(Home);

 
클래스형 컴포넌트에서는 props로 다국어 문구를 받을 수 있도록 구성할 수 있습니다.
react-i18next 라이브러리에서 지원하는 withTranslation HOC로 컴포넌트를 감싸준 후 export default로 내보내도록 작성합니다.

 
* HOC(Higher Order Component) : 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다.

 
 
 
 

import { withTranslation } from "react-i18next";

export class Home extends React.Component {
	...

	render(){
	  const { t } = this.props;

	  return (
		<>
		  <div>{t('type')}</div> {/* "kr" or "en" */}
		  <div>{t('home.welcome')}</div> {/* "반갑습니다!" or "Welcome!" */}
		</>
	  )
 	}
}
export default withTranslation()(Home);

props를 통해  t 함수를 받아올 수 있고, 해당 함수로 연결시켜둔 다국어 문구들을 불러올 수 있습니다.
함수 매개변수로는 연결되어있는 각각의 json 언어 파일에서 translation 안에 있는 데이터 키값을 넣어주면 됩니다.
 
 
 

import { withTranslation } from "react-i18next";

export class Home extends React.Component {
	...
    
    // 지원 언어를 변경하는 함수
    changeLanguage = (languageType) => {
    	const { i18n } = this.props;
        i18n.changeLanguage(languageType);
    }

	render(){
	  const { t } = this.props;

	  return (
		<>
		  <div>{t('type')}</div> {/* "kr" or "en" */}
		  <div>{t('home.welcome')}</div> {/* "반갑습니다!" or "Welcome!" */}
          
                  <button onClick={() => this.changeLanguage('kr')}>
                      t('language.kr')
                  </button>
                  <button onClick={() => this.changeLanguage('en')}>
                      t('language.en')
                  </button>
		</>
	  )
 	}
}
export default withTranslation()(Home);

현재 지원하는 언어를 변경하고 싶다면 t 함수와 마찬가지로 props를 통해  in18 인스턴스를 받아와서 사용할 수 있습니다.
i18n.changeLanguage('kr') 과 같은 코드를 실행해주면, 현재 지원하는 언어가 kr(한국어) 값으로 변경됩니다.
 
 
 
https://react.i18next.com/getting-started

Getting started - react-i18next documentation

https://react.i18next.com/latest/withtranslation-hoc

withTranslation (HOC) - react-i18next documentation