[React Native] 다국어 처리 - react-intl

React 목록

react-intl 모듈 설치

$ npm install react-intl

 

 

 

lang 구성

$ mkdir /src/lang
$ touch /src/lang/lang.ko.ts
$ touch /src/lang/lang.en.ts

 

 

 

 

App.tsx

...
import {Platform, NativeModules} from 'react-native';
import {IntlProvider} from 'react-intl';
import enMessage from './src/lang/lang.en';
import koMessage from './src/lang/lang.ko';

const App = () => {
  // 시스템 언어 가져오기
  const getSystemLanguage = () => {
    const deviceLanguage =
      Platform.OS === 'ios'
        ? NativeModules.SettingsManager.settings.AppleLocale ||
          NativeModules.SettingsManager.settings.AppleLanguages[0] // iOS 13
        : NativeModules.I18nManager.localeIdentifier;
    
    // 한국어 ko_KR
    if (deviceLanguage.toLowerCase().indexOf('ko') >= 0) {
      return 'ko';
    }

    // 영어 en_US
    if (deviceLanguage.toLowerCase().indexOf('en') >= 0) {
      return 'en';
    }

    return 'en';
  };

  let defaultLang = {};
  const locale = getSystemLanguage();
  if (locale === 'ko') {
    defaultLang = koMessage;
  }
  if (locale === 'en') {
    defaultLang = enMessage;
  }

  return (
    <IntlProvider locale={locale} messages={defaultLang}>
      ...
    </IntlProvider>
  );
};
export default App;

 

 

 

lang.ko.ts

export default {
  test: '한국어',
};

 

 

 

 

lang.en.ts

export default {
  test: 'English',
};

 

 

 

 

사용하기

...
import {useIntl} from 'react-intl';

const TestComponent = (props: any) => {
  const intl = useIntl();

  console.log(intl.formatMessage({id: 'test', defaultMessage: '언어없음'}));

  return (
    <View>
      <Text>
        <FormattedMessage id="test" />
      </Text>
    </View>
  );
};
export default TestComponent;

 

 

 

 

국가별 언어코드

언어	코드
아랍어	ar-XA
불가리아어	bg
크로아티아어	hr
체코어	cs
덴마크어	da
독일어	de
그리스어	el
영어	en
에스토니아어	et
스페인어	es
핀란드어	fi
프랑스어	fr
아일랜드어	ga
힌디어	hi
헝가리어	hu
히브리어	he
이탈리아어	it
일본어	ja
한국어	ko
라트비아어	lv
리투아니아어	lt
네덜란드어	nl
노르웨이어	no
폴란드어	pl
포르투갈어	pt
스웨덴어	sv
루마니아어	ro
러시아어	ru
세르비아어	sr-CS
슬로바키아어	sk
슬로베니아어	sl
태국어	th
터키어	tr
우크라이나어	uk-UA
중국어(간체)	zh-chs
중국어(번체)	zh-cht

 

 

 

React 목록