다국어 언어 팩 지원하기 (Expo, expo-localization, i18next)Supporting Multilingual Language Packs (Expo, expo-localization, i18next)
📅
🚀
들어가기 전에🔗
✅
다국어 언어 팩 지원하기 - Expo🔗
다른 언어를 사용하거나 다른 문화권에서 온 사용자들이 앱을 쉽게 사용할 수 있도록 하려면 앱을 localize 해야 합니다. 앱을 localize 하면 사용자 디바이스의 로캘 국가에 맞게 조정됩니다. 그렇게 되면 앱은 사용자가 알고 이해하는 번역과 통화를 표시합니다.
다국어 언어 팩을 지원하는 방법은 Expo에서 제공하는 expo-localization↗ 라이브러리를 사용하면 됩니다. 이 라이브러리는 i18n-js↗ 라이브러리 같은 언어 팩 라이브러리를 사용하기 전, 앱의 언어 설정을 쉽게 접근 할 수 있도록 하는 기능을 제공합니다. 앱을 글로벌하게 서비스하고자 하는 경우, 다국어 언어 팩을 지원하는 것은 필수적입니다.
기존의 다국어 언어 팩을 지원하는 방법은 i18n 베이스의 라이브러리를 사용하는 방법이 있습니다. 하지만 여기 더해 Expod에서 지원하는 sdk를 사용하면 더 쉽게 구현할 수 있습니다.
이번 포스팅에서는 i18next↗ 라이브러리를 함께 사용하여 다국어 언어 팩을 지원하는 방법을 알아보겠습니다. 기본적인 i18next 라이브러리의 자세한 사용법은 다음 포스팅 i18next를 활용한 다국어 번역 구현하기 (React, Expo, React Native)을 참고하시면 됩니다.
🚀
expo-localization, react-i18next 라이브러리 설치🔗
✅
설치🔗
먼저 아래 명령어를 실행하여
expo-localization, react-i18next, i18next, @react-native-async-storage/async-storage 라이브러리를 설치합니다.npx expo install expo-localization react-i18next i18next @react-native-async-storage/async-storage설치 후,
expo-localization을 import 하여 기기의 현재 언어 설정을 가져오는 코드를 작성할 수 있습니다.import React from "react";
import { View, Text } from "react-native";
import { getLocales } from "expo-localization";
const App = () => {
const deviceLanguage = getLocales()[0].languageCode;
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Text style={{ fontSize: 20 }}>현재 기기 언어: {deviceLanguage}</Text>
</View>
);
};
export default App;
위 코드에서
getLocales()는 기기의 시스템 설정
에 따라 현재 지역 정보를 반환합니다. 이를 통해 앱이 사용자의 선호 언어를 자동으로 감지할 수 있습니다.
👨💻
최신 안드로이드/IOS 버전에서는 앱별로 언어 설정을 변경할 수 있다고 합니다. 앱 내부에 언어 변경 버튼이 필요한지 잘 판단해보시길 바랍니다~🚀
다국어 번역 구현하기 - i18next 활용🔗
/app/index.ts 전체 코드 미리보기
import React from "react";
import { View, Text, Button } from "react-native";
import { initReactI18next, useTranslation } from "react-i18next";
import { getLocales } from "expo-localization";
import i18n from "i18next";
const resources = {
en: {
translation: {
welcome: "Welcome to the app!",
},
},
ko: {
translation: {
welcome: "앱에 오신 것을 환영합니다!",
},
},
ar: {
translation: {
welcome: "مرحبًا بك في التطبيق!",
},
},
};
i18n.use(initReactI18next).init({
resources,
lng: getLocales()[0].languageCode || "ko",
fallbackLng: {
"en-*": ["en"],
"ko-*": ["ko"],
"ar-*": ["ar"],
default: ["en"],
},
interpolation: {
escapeValue: false,
},
react: {
useSuspense: false,
},
});
const App = () => {
const { t, i18n } = useTranslation();
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
gap: 20,
}}
>
<Text>{t("welcome")}</Text>
<Button title="English" onPress={() => i18n.changeLanguage("en")} />
<Button title="Korean" onPress={() => i18n.changeLanguage("ko")} />
<Button title="Arabic" onPress={() => i18n.changeLanguage("ar")} />
</View>
);
};
export default App;✅
번역 데이터 구성🔗
앱에서 지원할 언어와 번역 데이터를 정의합니다:
// 컴포넌트 밖에 번역 데이터 정의
const resources = {
en: {
translation: {
welcome: "Welcome to the app!",
},
},
ko: {
translation: {
welcome: "앱에 오신 것을 환영합니다!",
},
},
ar: {
translation: {
welcome: "مرحبًا بك في التطبيق!",
},
},
};
// ...✅
i18next 초기화🔗
추가적으로, i18n을 초기화해주는 코드를 작성합니다. 이때
getLocales()[0].languageCode를 사용해 사용자의 기기 언어를 기본 언어로 설정합니다.
fallbackLng을 통해 언어가 지정되지 않은 경우 대페할 기본 언어를 설정할 수 있습니다.import i18n from "i18next";
import { initReactI18next } from "react-i18next";
i18n.use(initReactI18next).init({
resources,
lng: getLocales()[0].languageCode || "ko",
fallbackLng: {
"en-*": ["en"],
"ko-*": ["ko"],
"ar-*": ["ar"],
default: ["en"],
},
interpolation: {
escapeValue: false,
},
react: {
useSuspense: false,
},
});✅
번역 사용, 언어 변경 버튼 추가🔗
마지막으로, 번역을 사용하고 언어를 변경할 수 있는 버튼을 추가합니다.
useTranslation 훅을 사용하여 번역을 사용할 수 있습니다. `import React from "react";
import { View, Text, Button } from "react-native";
import { initReactI18next, useTranslation } from "react-i18next";
import { getLocales } from "expo-localization";
import i18n from "i18next";
//... i18n 초기화 코드
const App = () => {
const { t, i18n } = useTranslation();
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
gap: 20,
}}
>
<Text>{t("welcome")}</Text>
<Button title="English" onPress={() => i18n.changeLanguage("en")} />
<Button title="Korean" onPress={() => i18n.changeLanguage("ko")} />
<Button title="Arabic" onPress={() => i18n.changeLanguage("ar")} />
</View>
);
};
export default App;
이제 각각의 버튼을 누르면 해당 언어로 번역이 변경됩니다.
🚀
언어 팩, i18n 초기화 과정 별도 파일로 분리하기🔗
위 코드에서 번역 데이터를 컴포넌트 밖에 변수로 정의했습니다. 이렇게 하면 코드가 길어지고 관리하기 어려울 수 있습니다. 번역 데이터를 별도 파일로 분리하여 관리하는 방법을 알아보겠습니다.
터미널에 다음 명령어를 입력하여 번역 데이터를 저장할 디렉토리와 파일을 생성합니다.
mkdir -p src/i18n/locales/{en-US,ko-KR,ar-SA} && \
touch src/i18n/index.ts \
src/i18n/locales/en-US/translations.json \
src/i18n/locales/ko-KR/translations.json \
src/i18n/locales/ar-SA/translations.json다음과 같은 디렉토리 구조가 생성됩니다.
📦 src
┣ 📂 i18n
┃ ┣ 📂 locales
┃ ┃ ┣ 📂 ar-SA
┃ ┃ ┃ ┗ 📜 translations.json
┃ ┃ ┣ 📂 en-US
┃ ┃ ┃ ┗ 📜 translations.json
┃ ┃ ┗ 📂 ko-KR
┃ ┃ ┃ ┗ 📜 translations.json
┗ ┗ 📜 index.ts
각각의 json 파일에 번역 데이터를 작성합니다.
{
"welcome": "Welcome to the app!"
}{
"welcome": "앱에 오신 것을 환영합니다!"
}{
"welcome": "مرحبًا بك في التطبيق!"
}이제
src/i18n/index.ts 파일에 번역 데이터를 불러오는 코드를 작성합니다.import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import { getLocales } from "expo-localization";
import translationEn from "./locales/en-US/translations.json";
import translationKo from "./locales/ko-KR/translations.json";
import translationAr from "./locales/ar-SA/translations.json";
const resources = {
en: { translation: translationEn },
ko: { translation: translationKo },
ar: { translation: translationAr },
};
const initI18n = async () => {
i18n.use(initReactI18next).init({
resources,
lng: getLocales()[0].languageCode || "ko",
fallbackLng: {
"en-*": ["en"],
"ko-*": ["ko"],
"ar-*": ["ar"],
default: ["en"],
},
interpolation: {
escapeValue: false,
},
react: {
useSuspense: false,
},
});
};
initI18n();
export default i18n;마지막으로,
src/i18n/index.ts 파일을 import하여 사용합니다. 이제 번역 데이터를 관리하기 편리해졌습니다. /app/_layout.tsx 파일에 적용해서 프로젝트 전체에서 반영되도록 할 수 있습니다.import "@/src/i18n";
// ... App 컴포넌트 밖의 i18n 초기화 코드 제거🚀
언어 고정하기🔗
언어를 한번 변경했을 때, 앱을 종료하고 다시 실행해도 변경된 언어가 유지되도록 하려면
AsyncStorage를 사용하여 언어 설정을 저장하면 됩니다. AsyncStorage는 앱의 데이터를 비동기적으로 저장하고 불러올 수 있는 기능을 제공합니다.
우리는 /src/i18n/index.ts 파일에서 AsyncStorage를 사용하여 언어 설정을 저장하고 불러오는 코드를 작성합니다.- AsyncStorage에 저장되어있는 언어 설정을 확인합니다.
- 저장된 언어 설정이 없다면, 기기의 언어 설정을 확인하여 해당 언어로 설정합니다.
- 저장된 언어 설정이 있다면, 해당 언어로 설정합니다.
- 언어 설정을 AsyncStorage에 저장합니다.
이때, 언어 코드는 {언어코드}-{국가코드} 형식으로 저장합니다. 예를 들어, 한국어는
ko-KR, 영어는 en-US 형식으로 저장합니다. 하지만 현재 데이터는 ko, en, ar 형식으로 저장되어 있으므로, 기기에서 언어 설정을 불러온 후 언어 코드만 추출하여 저장합니다. 오류를 대비해 기본 언어는 en으로 설정합니다./src/i18n/index.ts 전체 코드
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import * as Localization from "expo-localization";
import AsyncStorage from "@react-native-async-storage/async-storage";
import translationEn from "./locales/en-US/translations.json";
import translationKo from "./locales/ko-KR/translations.json";
import translationAr from "./locales/ar-SA/translations.json";
const resources = {
en: { translation: translationEn },
ko: { translation: translationKo },
ar: { translation: translationAr },
};
const LANGUAGE_KEY = "@app_language";
const initI18n = async () => {
try {
const savedLanguage = await AsyncStorage.getItem(LANGUAGE_KEY);
let selectedLanguage = savedLanguage;
if (!selectedLanguage) {
const deviceLocales = Localization.getLocales();
const deviceLocale = deviceLocales[0]?.languageTag || "en-US";
const languageCode = deviceLocale.split("-")[0];
if (languageCode in resources) {
selectedLanguage = languageCode;
} else {
selectedLanguage = "en";
}
}
await i18n.use(initReactI18next).init({
resources,
lng: selectedLanguage,
fallbackLng: {
"en-*": ["en"],
"ko-*": ["ko"],
"ar-*": ["ar"],
default: ["en"],
},
interpolation: {
escapeValue: false,
},
react: {
useSuspense: false,
},
});
if (!savedLanguage) {
await AsyncStorage.setItem(LANGUAGE_KEY, selectedLanguage);
}
} catch (error) {
await i18n.use(initReactI18next).init({
resources,
lng: "en",
fallbackLng: "en",
interpolation: {
escapeValue: false,
},
react: {
useSuspense: false,
},
});
}
};
initI18n();
export default i18n;/app/index.tsx 파일에서 언어 변경 버튼을 누를 때마다 AsyncStorage에 언어 설정을 저장합니다./app/index.ts 전체 코드
import React from "react";
import "@/src/i18n";
import { View, Text, Button } from "react-native";
import { useTranslation } from "react-i18next";
import AsyncStorage from "@react-native-async-storage/async-storage";
const App = () => {
const { t, i18n } = useTranslation();
const changeLanguage = async (language: "en" | "ko" | "ar") => {
i18n.changeLanguage(language);
await AsyncStorage.setItem("@app_language", language);
};
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
gap: 20,
}}
>
<Text>{t("welcome")}</Text>
<Button title="English" onPress={() => changeLanguage("en")} />
<Button title="Korean" onPress={() => changeLanguage("ko")} />
<Button title="Arabic" onPress={() => changeLanguage("ar")} />
</View>
);
};
export default App;이제 앱을 실행하면, 앱이 종료되어도 설정된 언어가 유지됩니다. 언어 설정을 변경하고 앱을 종료한 후 다시 실행해보세요.
🚀
문제🔗
✅
Cannot find native module 'ExpoLocalization'🔗
development 모드에서 발생하며, 이는 네이티브 코드에 반영이 되지 않아 발생하는 문제입니다. 다음 명령어를 실행하여 해결할 수 있습니다.
cd ios && pod install && cd ..
npx expo run:ios🚀
결론🔗
이번 포스팅에서는 Expo 환경에서 다국어 언어 팩을 지원하는 방법을 알아보았습니다. Expo에서 제공하는
expo-localization 라이브러리를 사용하여 기기의 언어 설정을 가져오고, i18next 라이브러리를 사용하여 다국어 번역을 구현하는 방법을 알아보았습니다.
또한 번역 데이터를 별도 파일로 분리하여 관리하고, AsyncStorage를 사용하여 언어 설정을 저장하는 방법을 알아보았습니다. 다국어 언어 팩을 지원하는 것은 앱을 글로벌하게 서비스하고자 하는 경우 필수적입니다. 앱을 사용하는 사용자들이 편리하게 앱을 사용할 수 있도록 다국어 언어 팩을 지원하는 것을 고려해보세요.✅