안드로이드 다국어 앱 만들기 Expo Localization i18next

Expo Localization은 React Native/Expo 앱에서 다국어 지원을 구현하기에 적합한 라이브러리입니다

 

설치

npx expo install expo-localization

 

expo-localization의 주요 기능

// 주요 import 항목
import { 
  getLocales,     // 사용자 디바이스의 언어 설정 조회
  getCalendars,   // 캘린더 정보 조회
  useLocales,     // 로케일 정보를 위한 React Hook
  useCalendars    // 캘린더 정보를 위한 React Hook
} from 'expo-localization';

 

로케일 정보 조회

const locales = Localization.getLocales();
// 결과 예시:
// [{
//   languageTag: "ko-KR",
//   languageCode: "ko",
//   regionCode: "KR",
//   textDirection: "ltr",
//   ...
// }]

 

날짜/시간 형식

const calendars = Localization.getCalendars();
// 결과 예시:
// [{
//   calendar: "gregory",
//   timeZone: "Asia/Seoul",
//   uses24hourClock: true,
//   firstWeekday: 1
// }]

1. 특징:

• 디바이스의 언어 설정을 자동으로 감지
• RTL(Right-to-Left) 언어 지원
• 통화, 숫자 형식, 측정 단위 등의 지역화 정보 제공
• 시간대 및 캘린더 정보 지원

1. 장점:

• Expo 생태계와 완벽한 통합
• 간단한 설정과 사용법
• 디바이스 설정 변경 실시간 반영 가능
• 다양한 지역화 정보 제공

이렇게 설정하면:

• 사용자 기기의 언어 설정에 따라 자동으로 언어가 변경됩니다
• 앱이 포그라운드로 돌아올 때마다 언어 설정을 확인합니다
• RTL 언어를 포함한 다양한 언어를 지원할 수 있습니다
• 날짜, 시간, 통화 등의 형식이 지역에 맞게 자동으로 적용됩니다

 

실제 사용 예시:

import { useTranslation } from 'react-i18next';
import { View, Text } from 'react-native';

export function MyComponent() {
  const { t } = useTranslation();
  
  return (
    <View>
      <Text>{t('common.welcome')}</Text>
      <Text>{new Date().toLocaleDateString()}</Text>
    </View>
  );
}

 

expo-localization은 React Native/Expo 앱의 국제화/지역화에 필요한 대부분의 기능을 제공하며, i18next나 다른 번역 라이브러리와 함께 사용하면 완벽한 다국어 지원 앱을 만들 수 있습니다.

 

 

i18next와 expo-localization을 함께 사용하는 이유

 

각각 역할

expo-localization

• 디바이스의 언어/지역 설정 정보를 가져오는 역할
• 날짜, 시간, 통화 등의 형식 정보 제공
• RTL(Right-to-Left) 지원 여부 확인

 

import * as Localization from 'expo-localization';

// 디바이스 정보 가져오기
const deviceLocale = Localization.getLocales()[0];
console.log(deviceLocale.languageCode); // 'ko'
console.log(deviceLocale.regionCode);   // 'KR

 

i18next

• 실제 번역 문자열 관리
• 복수형 처리
• 문맥 기반 번역
• 변수 삽입

 

import { useTranslation } from 'react-i18next';

function Component() {
  const { t } = useTranslation();
  
  return (
    <>
      {/* 단순 번역 */}
      <Text>{t('welcome')}</Text>
      
      {/* 변수 삽입 */}
      <Text>{t('hello', { name: 'John' })}</Text>
      
      {/* 복수형 처리 */}
      <Text>{t('items', { count: 4 })}</Text>
    </>
  );
}

i18next의 강력한 기능들

 

// 복잡한 번역 예시
const translations = {
  ko: {
    translation: {
      // 복수형 처리
      items: {
        one: '{{count}}개의 항목',
        other: '{{count}}개의 항목들'
      },
      
      // 문맥 기반 번역
      friend: {
        male: '남자 친구',
        female: '여자 친구'
      },
      
      // 중첩된 키와 변수
      welcome: {
        morning: '좋은 아침입니다, {{name}}님',
        evening: '좋은 저녁입니다, {{name}}님'
      }
    }
  }
};

 

함께 사용했을 때의 장점

 

import * as Localization from 'expo-localization';
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// expo-localization으로 디바이스 설정 가져오기
const deviceLang = Localization.getLocales()[0].languageCode;

// i18next 설정에 적용
i18n
  .use(initReactI18next)
  .init({

1. 주요 이점:

• expo-localization: 디바이스 설정 정보 제공
• i18next: 강력한 번역 관리 기능 제공
• 함께 사용 시:
  • 자동 언어 감지
  • 복잡한 번역 처리
  • 디바이스에 맞는 날짜/시간/통화 형식
  • 유연한 확장성

이렇게 두 라이브러리를 함께 사용하면, expo-localization의 디바이스 정보 감지 기능과 i18next의 강력한 번역 관리 기능을 모두 활용할 수 있어 더 완성도 높은 다국어 지원이 가능합니다.

    lng: deviceLang,           // 디바이스 언어 적용
    fallbackLng: 'en',        // 번역 없을 경우 영어로
    resources: translations,   // 번역 리소스
    
    // 고급 기능 설정
    interpolation: {
      escapeValue: false,
      // 날짜/시간 형식화에 디바이스 설정 사용
      format: (value, format) => {
        if (format === 'date') {
          return new Date(value).toLocaleDateString(deviceLang);
        }
        return value;
      }
    }
  });

 

1. 주요 이점:

• expo-localization: 디바이스 설정 정보 제공
• i18next: 강력한 번역 관리 기능 제공
• 함께 사용 시:
  • 자동 언어 감지
  • 복잡한 번역 처리
  • 디바이스에 맞는 날짜/시간/통화 형식
  • 유연한 확장성

이렇게 두 라이브러리를 함께 사용하면, expo-localization의 디바이스 정보 감지 기능과 i18next의 강력한 번역 관리 기능을 모두 활용할 수 있어 더 완성도 높은 다국어 지원이 가능합니다.