ReactNative의 Expo 개발 환경에서는 expo-localization 라이브러리를 이용해서 사용자의 로케일 및 언어 기본 설정에 대한 정보를 얻을 수 있습니다. 여기에는 사용자가 선호하는 언어, 국가 코드, 시간대 등이 포함됩니다. 이 라이브러리는 사용자의 로케일을 나타내는 문자열(예: 미국 영어의 경우 "en-US")을 반환하는 Localization.locale과 UTC에서 사용자의 시간대 오프셋을 반환하는 Localization.timezone을 비롯한 여러 메서드를 제공합니다.
i18n-js는 JavaScript의 국제화를 위한 라이브러리입니다. 이 라이브러리는 앱 콘텐츠를 여러 언어로 번역하고 사용자의 로케일에 따라 적절한 언어를 선택할 수 있는 방법을 제공합니다. 이 라이브러리는 복수화, 성별에 따른 번역 및 기타 일반적인 로컬라이제이션 작업을 처리하는 메서드를 제공합니다.
i18n-js는 원래 2008년에 Ruby on Rails 커뮤니티에서 Rails 애플리케이션의 국제화를 처리하기 위한 방법으로 개발되었습니다. 이후 JavaScript로 포팅되어 웹 및 모바일 애플리케이션의 국제화를 위한 인기 있는 라이브러리가 되었습니다. 이 라이브러리는 브라우저 기반 및 서버 기반 번역을 모두 지원하며 대규모 기여자 커뮤니티를 보유하고 있습니다.
import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';
import { getLocales } from 'expo-localization';
import {I18n}from 'i18n-js';
const i18n = new I18n({
en: {
hello: "Hi!",
},
ko: {
hello: "안녕하세요!",
},
});
i18n.locale = 'ko'
export default function App() {
const [locale, setLocale] = useState('');
useEffect(() => {
async function fetchLocale() {
const currentLocale = await getLocales();
setLocale(currentLocale[0].languageCode);
}
fetchLocale();
}, []);
return (
<View>
<Text>{i18n.t('hello')}</Text>
<Text>Current locale: {locale}</Text>
</View>
);
}이 예제에서는 expo-localization에서 getLocale 함수를 가져와서 useEffect 훅 안에서 사용하여 현재 디바이스 로케일을 비동기적으로 가져옵니다. 그런 다음 useState 훅을 사용하여 결과를 state에 저장하고 Text 컴포넌트에 표시합니다.
getLocale은 프로미스를 반환하기 때문에 비동기적으로 호출한다는 점에 유의하세요. 또한 컴포넌트가 마운트될 때 이펙트가 한 번만 실행되도록 빈 의존성 배열과 함께 useEffect 훅을 사용합니다. 이렇게 하면 불필요하게 getLocale을 호출하여 컴포넌트가 불필요하게 다시 렌더링되는 것을 방지할 수 있습니다.
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0
