[ React Native ] i18n 적용 언어변경하기

react native 앱에서 언어 변경을 하기 위해서 i18n을 사용

직접 언어변경을 만들까 하다가 그냥 i18n을 사용하기로 했다.

 

i18n 초기 세팅 이후에는 테마 변경처럼 동일하게 사용한다.

---

Initialized

세개의 패키지를 설치

react-native-localize는 시스템 언어를 가져오기 위해서 사용한다.

npm install i18next react-i18next react-native-localize

 

한국, 영어 언어 json을 생성

// i18n/ko.json
{
  "translate": "언어",
  "theme" : "테마"
}

// i18n/en.json
{
  "translate": "Language",
  "theme" : "Theme"
}

 

이후 i18n 초기화 작업을 한다.

기본 언어는 한국어로 처리하고 만약 시스템 언어 설정이 영어 혹은 그 외면 영어로 초기화 작업을 처리

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as RNLocalize from 'react-native-localize';

import en from './locales/en.json';
import ko from './locales/ko.json';

const resources = {
    en: { translation: en },
    ko: { translation: ko }
};

const locales = RNLocalize.getLocales();
let lng = 'en';
if (Array.isArray(locales)) {
    const matched =
        locales.find(l => ['en', 'ko'].includes(l.languageCode));

    if (matched) lng = matched.languageCode;
}

i18n.use(initReactI18next).init({
    resources,
    lng,
    fallbackLng: 'en',
    interpolation: { escapeValue: false },
});

export default i18n;

---

Useage

우선 메인 App.tsx에 초기화함수를 실행시켜준다.

import '@/i18n'

 

이후 언어 상태관리를 위해 store에 추가

import {create} from "zustand/react";
import {selectLang, selectTheme} from "@/constant/setting.ts";

interface AppState {
    lang: keyof typeof selectLang
    setLang: (val : keyof typeof selectLang) => void
}

export const useAppStore = create<AppState>((set,get) => ({
    lang: 'en',
    setLang: (val) => set({lang: val})
}))

 

이후 바꾸는 ui를 만들고 나서

값이 변경되면 store와 보여주기값을 수정하고

changeLanguage를 사용해 언어를 변경 이후

localstorage에 저장

    const {t,i18n} = useTranslation()
    const appStore = useAppStore()

    /* 언어 설정 */
    const [appLang, setAppLang] = useState<keyof typeof selectLang>(appStore.lang);

    const onSelectLang = async (value: keyof typeof selectLang) => {
        setAppLang(value)
        appStore.setLang(value)

        await i18n.changeLanguage(value as string)
        await setLang(value)
    }

import {selectLang} from "@/constant/setting.ts";
import AsyncStorage from "@react-native-async-storage/async-storage";
import {APP_LANG_KEY} from "@/constant/storage.ts";

const setLangStorage = async (value: keyof typeof selectLang)=> {
    try {
        await AsyncStorage.setItem(APP_LANG_KEY, value as string)
    } catch (e) {
        console.error('저장 실패',e)
    }
}

const getLangStorage = async () => {
    try {
        const value = await AsyncStorage.getItem(APP_LANG_KEY)
        if(value !== null) {
            return value
        }
    } catch (e) {
        console.error('저장 실패',e)
    }
    return 'en'
}

export {setLangStorage, getLangStorage}

 

이제 다시 앱을 처음 불러올때에 저장된 언어 키값을 가져와야하기 때문에 App.tsx파일에 테마값과 동일하게 처리하며,

추가적으로 가져온 값을 changeLanguage로 언어를 변경

 

초기화 작업이 완료된후에 화면을 렌더링 시키기 위해서 

 

초기화 작업 완료 전까지 스플래시화면을 보여준다.

지금은 아직 스플래시화면을 어떻게 만들지 안정해서 null값을 return시켰다.

 const {i18n} = useTranslation()
    const appStore = useAppStore()

    const [isReady, setIsReady] = useState(false)

    useEffect(() => {
        (
        async () => {
            const storageTheme = await getThemeStorage()
            if(storageTheme) {
                appStore.setTheme(storageTheme)
                await setTheme(storageTheme)
            } else {
                appStore.setTheme('white')
                await setTheme('white')
            }

            const storageLang = await getLangStorage()

            if(storageLang) {
                appStore.setLang(storageLang)
                await setLang(storageLang)
                await i18n.changeLanguage(storageLang)
            } else {
                appStore.setLang('en')
                await setLang('en')
                await i18n.changeLanguage('en')
            }

            setIsReady(true)
        })()
    },[])

    // 스플래쉬 하면 필요
    if(!isReady) return null;
    
    return (
    <SafeAreaProvider>
        <SafeAreaView style={{
            flex: 1,
            backgroundColor: theme.app_theme_background
        }}>
            <Host>
                <StackNavigation/>
            </Host>
        </SafeAreaView>
    </SafeAreaProvider>
  );

 

이러면 언어 변경을 하면 설정안 언어로 변경되고, 이후 새로고침해도 저장된 언어로 변경된다.