다국어 페이지 사용 방법에 대해 알아보자

다국어 페이지란?

• 웹 사이트에서 여러 개의 언어를 사용할 수 있게 한 것

i18n이란?

• i18n이란 internationalization 단어를 축약한 것으로, 프로그램 특정 지역이나 언어에 종속이 아닌, 다양한 언어의 웹 페이지를 만들 수 있다.

웹 프로젝트에서 i18n을 사용해보자

현재 리액트에서 i18n을 사용할 수 있는 라이브러리가 있다.

yarn add react-i18next i18next i18next-browser-languagedetercor

위 명령어를 이용하여 라이브러리를 설치하고, i18n의 설정 파일을 작성해주자.

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
// json
import en from './en.json';
import ko from './ko.json';

const resources = {
  en: {
    translation: en,
  },
  ko: {
    translation: ko,
  },
};

const options = {
  detection: {
    order: ['localStorage', 'navigator', 'htmlTag'],
  },
  resources,
  fallbackLng: 'en',
  supportedLngs: ['en', 'ko'],
  debug: false,
  keySeparator: '.',
  interpolation: {
    escapeValue: false,
  },
};

i18next
  .use(initReactI18next) // passes i18n down to react-i18next
  .use(LanguageDetector)
  .init(options);

export default i18next;

위와 같이 코드를 작성해준다.

여기서 resource는 다국어페이지 사용할 파일들이다.

fallbackLng는 해당 키에 맞는 값이 없을 경우 default로 보여주는 값이다.

나는 프로젝트에서 영문 페이지와 한국어 페이지만 사용하므로,

프로젝트 내부에 locale 파일을 가지고 있어 en파일과, ko 파일을 직접 작성해주었다.

작성해 줄 때는 en파일과 ko 파일의 키 값을 동일하게 작성해주는 것을 잊지말자.

작성 코드의 예시는 다음과 같다.

/en.json
{
	"key" : "value",
	"key1" : "value"
}

/ko.json
{
	"key" : "값",
	"key1" : "값1"
}

위와 같이 json파일을 만들어주고, 프로젝트 내부에서는 키값을 이용해서 사용해주면 된다.

import { useTranslation } from 'react-i18next'

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

		...
	return (
		<Wrapper>
			{t('key')}
		</Wrapper>
	)
}

위와 같이 필요한 키 값을 {t(’키값’)} 과 같이 사용해주면, 실행 환경에서는

영문일때는 value, 한글일 때는 값 으로 나타나는 것을 확인할 수 있다.