[ React ] 다국어 처리 i18next

다국어 처리(i18n)를 통해 다국적 사용자를 지원합니다.

핵심적인 기능은 선택된 언어에 따라 텍스트를 동적으로 변경하는 것입니다.

이 기능은 i18next 라이브러리를 사용하여 구현되었습니다.

---

1. i18next 라이브러리 설치

• i18next는 다국어 처리를 간편하게 지원하는 라이브러리입니다.

• React 프로젝트에서는 보통 react-i18next를 함께 사용합니다.

npm install i18next react-i18next

2. 번역 파일 준비

• 언어별 JSON 파일로 텍스트 리소스를 준비합니다.

• 예: /locales/ko/translation.json (한국어), /locales/en/translation.json (영어).

// ko/translation.json
{
  "welcome": "환영합니다",
  "description": "이것은 한국어 번역입니다."
}

// en/translation.json
{
  "welcome": "Welcome",
  "description": "This is an English translation."
}

3. i18next 초기화

• 프로젝트의 초기화 파일(i18n.ts 또는 i18n.js)에서 설정합니다.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import translationEN from './locales/en/translation.json';
import translationKO from './locales/ko/translation.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: translationEN },
      ko: { translation: translationKO },
    },
    lng: 'ko', // 기본 언어
    fallbackLng: 'en', // 기본 언어를 찾을 수 없을 때 사용할 언어
    interpolation: {
      escapeValue: false, // React에서 자동 escaping
    },
  });

export default i18n;

4. 컴포넌트에서 번역 사용

• 컴포넌트에서 useTranslation 훅을 사용해 번역 텍스트를 불러옵니다.

import { useTranslation } from 'react-i18next';

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

  return <h1>{t('welcome')}</h1>; // 현재 언어의 "welcome" 키에 해당하는 텍스트 출력
}

5. 언어 변경

• i18n.changeLanguage 메서드를 호출하여 언어를 변경합니다.

i18n.changeLanguage('en'); // 영어로 변경

 

---

다국어 처리의 장점

 

1. 유연한 언어 지원:

• 텍스트 리소스를 별도 파일로 관리하여 언어 추가/수정이 용이.

2. 컴포넌트 재사용성:

• t 함수를 사용해 어디서든 텍스트 번역 가능.

3. 로컬 스토리지/쿠키 기반 언어 유지:

• 사용자가 선택한 언어를 저장하여 재접속 시 언어를 유지.

 

---

 

추가적으로 고려할 점

 

• 언어 파일 최적화:

• 파일 크기가 클 경우, Lazy Loading으로 필요한 언어만 로드.

• 문자열 포맷팅:

• 동적 데이터 삽입을 지원하는 기능 (t('key', { value: 'example' })).

 

위 코드와 개념을 통해 다국어를 효율적으로 처리할 수 있습니다

 

---

1. useTranslation 훅

const { t, i18n } = useTranslation();

• t: i18next의 번역 함수입니다. 주어진 키를 사용해 현재 언어에 해당하는 번역을 반환합니다.

• 예: t('key')를 호출하면 현재 선택된 언어에 맞는 문자열을 반환합니다.

• i18n: 언어 설정과 관련된 다양한 메서드를 제공합니다. 여기에서는 changeLanguage를 통해 언어를 변경합니다.

 

2. 언어 상태 관리

const [language, setLanguage] = useState(localStorage.getItem('language') || 'ko');

• 초기 언어를 로컬 스토리지에서 가져오거나 기본값을 ‘ko’(한국어)로 설정합니다.

• 언어 변경 시 setLanguage를 호출해 상태를 업데이트합니다.

 

3. 언어 변경 핸들러

const handleLanguageChange = (event: SelectChangeEvent) => {
  const selectedLanguage = event.target.value as string;
  setLanguage(selectedLanguage);
  i18n.changeLanguage(selectedLanguage).then(() => {
    localStorage.setItem('language', selectedLanguage);
    window.dispatchEvent(new Event('storage'));
  });
};

• event.target.value를 통해 선택된 언어 값을 가져옵니다.

• setLanguage: 상태를 업데이트하여 UI에 반영.

• i18n.changeLanguage: 언어 변경 메서드 호출.

• i18n.changeLanguage('en') → 영어로 전환.

• 로컬 스토리지에 선택한 언어를 저장하여 페이지 새로고침 이후에도 언어가 유지되도록 합니다.

 

4. 언어 선택 UI

<Select
  id="language-select"
  value={language}
  onChange={handleLanguageChange}
  sx={{
    width: '100px',
    fontSize: '12px'
  }}
>
  <MenuItem value={'ko'}>KOR</MenuItem>
  <MenuItem value={'en'}>ENG</MenuItem>
  <MenuItem value={'ja'}>JPN</MenuItem>
</Select>

• value: 현재 선택된 언어.

• onChange: 언어 변경 이벤트를 처리.

• 사용자는 드롭다운 메뉴를 통해 언어(KOR, ENG, JPN)를 선택.