러아니푸의 기록

1.  Node.js 설치

https://nodejs.org/en/download

2. Visual Studio Code 설치

* os에 맞게 잘 선택해서 설치하시길 바랍니다.

https://code.visualstudio.com/

3. Visual Studio Code에서 프로젝트 관리 폴더 열기

파일 > 열기 > 미리 생성해둔 폴더 열기(react)

4.  터미널에 프로젝트 생성 명령어 입력

터미널 > 새 터미널 > 열린 터미널에 명령어 입력

npx create-react-app 프로젝트 이름

5. 프로젝트 실행

생성된 프로젝트 폴더로 다시 이동합니다. ( 파일 > 열기 > 방금 생성된 프로젝트 폴더 )

터미널을 다시 열고 실행 명령어를 입력합니다.

npm run start

127.0.0.1:3000 주소로 프로젝트가 열립니다. (localhost:3000도 동일한 주소라고 생각하시면 됩니다)

Would you like to run the app on another port instead? (Y/n)

위와 같은 문구가 뜬 경우에는 프로젝트에 설정된 실행 포트번호를 사용하고 있는 프로젝트가 있다는 뜻입니다.

설정 변경이 없었다면, 3000번 포트번호를 사용중인 프로젝트가 있을 수 있습니다.

Y 입력시 : 프로젝트 실행 포트번호가 아닌 다른 포트번호로 프로젝트를 실행시켜줍니다.

n 입력시 : 취소

6. 프로젝트 종료

프로젝트를 종료하고 싶다면 터미널에 Ctrl+C를 입력하시면 됩니다.

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

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