AndChill 개발일지(8) - 다국어 지원 기능(i18next)

dali·2024년 9월 16일

And Chill 개발 기록

목록 보기

8/9

Github

AndChill 배포 사이트

글로벌 시대에 발맞추어 앵칠이에게도 다국어 지원 기능을 만들어 주겠습니다.

`i18next`로 다국어 지원 기능 구현하기 👩‍🦱👳🏾‍👨🏿👨🏼

i18n이란 internationalization(국제화) 라는 단어를 축약한 것이다. i부터 n까지 18개의 문자수를 축약해서 i18n 이라고 부른다는데 별로 중요하지 않으니 그만 알아보자.

초기 설정

다음과 같이 라이브러리 설치 후 진행하면 됩니다!

npm i i18next react-i18next i18next-browser-languagedetector

다음으로, i18next를 설정하는 코드를 작성합니다. 이 설정 파일은 어플리케이션이 사용하는 언어와 번역 리소스를 관리합니다.
각 언어에 대한 번역본을 translation 안에 적어주면 됩니다.

src/i18n.ts

import i18n from 'i18next';
import LanguaeDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';

i18n
  .use(LanguaeDetector) // 사용자 언어 탐지
  .use(initReactI18next) // i18n 객체를 react-i18next에 전달
  .init({
    debug: true, // 디버그 모드 활성화
    fallbackLng: 'en', // 언어 감지 실패 시 기본 언어
    interpolation: {
      escapeValue: false, // XSS 공격 방지
    },
    resources: {
      // 한국어
      ko: { 
         translation:{
        	nav: {
            	home: '홈',
            	discover: '탐색',
          	},
         } 
      },
      
      // 영어
      en: {
         translation:{
        	nav: {
            	home: 'Home',
            	discover: 'Discover',
          	},
         } 
      },
    },
  });

export default i18n;

사용 예시

컴포넌트에서 매우 쉽게 번역을 적용할 수 있습니다. useTranslation 훅을 사용하여 현재 언어에 맞는 번역을 가져올 수 있습니다.

이전에 만들었던 국가 선택 모달에서 i18next.changeLanguage 메서드를 사용해 각 국가 클릭 시 해당 국가의 언어를 사용할 언어로 바꿀 수 있습니다.

region-select-modal.tsx

  const handleRegionItemClick = (regionCode: string) => {
    const selectedLanguage = getLanguageByCountry(regionCode, lang);
    setRegion(regionCode, selectedLanguage);
    i18n.changeLanguage(selectedLanguage);
  };

적용 예시

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

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

  return (
    <div>
      <p>{t('nav.home')}</p>
    </div>
  );
};

export default MyComponent;