react-native, 기본 언어 설정

글로벌 서비스를 개발할때

기본 언어를 해당 사용자에 맞게

설정해주는 것은

사용자를 위한 최소한의 배려이다

 

간단하게

react-native 앱의 기본언어

설정 방법에 대해 알아본다.

 

[ 목차 ]

1. 디바이스 OS별 언어 설정 불러오기

2. 기본 언어 설정해주기

3. 전체 상태 변경

 

import {NativeModules, Platform} from 'react-native';

const useLanguageState = () => {
  useLayoutEffect(() => {
    const language = getSystemLanguage();
    console.log(language);
  }, []);
  
  const getSystemOriginLanguage = () => {
    let systemLanguage = '';
    if (Platform.OS === 'ios') {
      systemLanguage = NativeModules.SettingsManager.settings.AppleLocale
      || NativeModules.SettingsManager.settings.AppleLanguages[0];
    } else {
      NativeModules.I18nManager.localeIdentifier;
    }
    
    const language = systemLanguage.toLowerCase().indexOf('ko') >= 0 ? 'KR' : 'EN';
    return language;
  }
}

OS별로 시스템 랭귀지리를 불러와

콘솔에 찍어 확인해보았다.

 

기본 언어를 설정해주어야 하는데

앱이 재실행 됐을때도 해당 언어로

상태를 유지해주기위해

스토리지에 저장해 주도록 한다.

 

import {NativeModules, Platform} from 'react-native';
import storage from '@react-native-async-storage/async-storage';

type LanguageTypes = 'KR' | 'EN';

const useLanguageState = () => {
  useLayoutEffect(() => {
    const language = getSystemLanguage();
    setupUserLanguage(language);
  }, []);
  
  const getSystemOriginLanguage = () => {
    let systemLanguage = '';
    if (Platform.OS === 'ios') {
      systemLanguage = NativeModules.SettingsManager.settings.AppleLocale
      || NativeModules.SettingsManager.settings.AppleLanguages[0];
    } else {
      NativeModules.I18nManager.localeIdentifier;
    }
    
    const language = systemLanguage.toLowerCase().indexOf('ko') >= 0 ? 'KR' : 'EN';
    return language;
  }
  
  const setupUserLanguage = async (systemLanguage: LanguageTypes) => {
    const savedLanguage = await storage.getItem('language');
    if (!savedLanguage) {
      await updateUserDefaultLanguage(systemLanguage);
    }
  }
  
  const updateUserDefaultLanguage = async (lang: LanguageTypes) => {
    await storage.setItem('language', lang);
  } 
}

storage에 이전에 저장된 값이 있으면

갱신을 생략하고 없으면 갱신하는 구조이다.

 

이제 변경된 상태를

global state관리 도구로

서비스 전체에 적용해주면 되는데

여기서는 react-redux를 사용한다.

 

 

import {NativeModules, Platform} from 'react-native';
import {useDispatch, useSelector} from 'react-redux';
import storage from '@react-native-async-storage/async-storage';

import {RootState} from '@redux/store';
import {changeGlobalLanguage} from '@redux/setup/actions';

type LanguageTypes = 'KR' | 'EN';

const useLanguageState = () => {
  const dispatch = useDispatch();
  const { globalLanguage } = useSelector((state: RootState) => state.setup);

  useLayoutEffect(() => {
    const language = getSystemLanguage();
    setupUserLanguage(language);
  }, []);
  
  const getSystemOriginLanguage = () => {
    let systemLanguage = '';
    if (Platform.OS === 'ios') {
      systemLanguage = NativeModules.SettingsManager.settings.AppleLocale
      || NativeModules.SettingsManager.settings.AppleLanguages[0];
    } else {
      NativeModules.I18nManager.localeIdentifier;
    }
    
    const language = systemLanguage.toLowerCase().indexOf('ko') >= 0 ? 'KR' : 'EN';
    return language;
  }
  
  const setupUserLanguage = async (systemLanguage: LanguageTypes) => {
    const savedLanguage = await storage.getItem('language');
    await updateUserDefaultLanguage(systemLanguage);
  }
  
  const updateUserDefaultLanguage = async (lang: LanguageTypes) => {
    dispatch(changeGlobalLanguage(lang));
    await storage.setItem('language', lang);
  }
  
  return { language: globalLanguage };
}

 

store는 각자 구성해보도록 하자.

단순히 KR -> EN -> ... 등으로 string 변경만 해주는 수준이니

어렵지 않게 설정 가능할것이다.