Expo (React Native)에서 커스텀 폰트를 적용하고 설정하는 방법에 대해 알아봅니다.
Expo (React Native)에서 커스텀 폰트를 적용하고 설정하는 방법에 대해 알아보겠습니다.
폰트는 예시로 pretendard 폰트를 사용하며, Expo의 expo-font 라이브러리를 활용하여 폰트를 로드하고 적용하는 방법을 설명합니다.
이미 Expo 프로젝트가 생성되어 있다고 가정합니다. 만약 프로젝트가 없다면, 다음 명령어로 새 Expo 프로젝트를 생성할 수 있습니다.
npx create-expo-app@latest MyFontApp
cd MyFontApp먼저, 사용할 커스텀 폰트 파일(.ttf 또는 .otf)을 준비합니다. 예를 들어, assets/fonts 디렉토리에 Pretendard-Regular.ttf 파일을 저장합니다.
Expo 프로젝트에서는 expo-font 라이브러리를 사용하여 폰트를 로드할 수 있습니다. 다음 명령어로 expo-font를 설치합니다.
npx expo install expo-font이제 expo-font를 사용하여 폰트를 로드하고 적용하는 방법을 알아보겠습니다. app.json 파일을 열고 다음과 같이 수정합니다.
app.json에 추가 하는 이유는 빌드 시 네이티브 코드에 폰트가 포함되도록 하기 위함입니다.
{
"expo": {
"plugins": [
[
"expo-font",
{
"android": {
"fonts": [
{
"fontFamily": "Pretendard",
"fontDefinitions": [
{
"path": "./assets/fonts/Pretendard-Regular.otf",
"weight": 400,
"style": "normal"
},
{
"path": "./assets/fonts/Pretendard-Medium.otf",
"weight": 500,
"style": "normal"
},
{
"path": "./assets/fonts/Pretendard-SemiBold.otf",
"weight": 600,
"style": "normal"
},
{
"path": "./assets/fonts/Pretendard-Bold.otf",
"weight": 700,
"style": "normal"
},
{
"path": "./assets/fonts/Pretendard-ExtraBold.otf",
"weight": 800,
"style": "normal"
}
]
}
]
},
"ios": {
"fonts": [
"./assets/fonts/Pretendard-ExtraBold.otf",
"./assets/fonts/Pretendard-SemiBold.otf",
"./assets/fonts/Pretendard-Bold.otf",
"./assets/fonts/Pretendard-Medium.otf",
"./assets/fonts/Pretendard-Regular.otf"
]
}
}
]
]
}
}위 json 구조를 잘 참고하여 app.json 파일에 추가합니다.
이제 app 폴더의 layout.tsx 에서 폰트를 로드하고 적용하는 코드를 작성합니다.
우선 먼저 expo-splash-screen을 설치 합니다.
npx expo install expo-splash-screen그 다음, layout.tsx 파일을 다음과 같이 작성합니다.
import { Stack } from "expo-router";
import { useFonts } from "expo-font";
import { useEffect } from "react";
import * as SplashScreen from "expo-splash-screen";
// 이 부분은 앱이 로드될 때 스플래시 스크린을 자동으로 숨기지 않도록 설정합니다.
SplashScreen.preventAutoHideAsync();
export default function RootLayout() {
const [loaded, error] = useFonts({
"Pretendard-ExtraBold": require("../assets/fonts/Pretendard-ExtraBold.otf"),
"Pretendard-Bold": require("../assets/fonts/Pretendard-Bold.otf"),
"Pretendard-SemiBold": require("../assets/fonts/Pretendard-SemiBold.otf"),
"Pretendard-Medium": require("../assets/fonts/Pretendard-Medium.otf"),
"Pretendard-Regular": require("../assets/fonts/Pretendard-Regular.otf"),
});
useEffect(() => {
if (loaded || error) {
// 폰트가 로드되었거나 에러가 발생하면 스플래시 스크린을 숨깁니다.
SplashScreen.hideAsync();
}
}, [loaded, error]);
if (!loaded && !error) {
return null;
}
return {
// ... 기타 설정 ...
};
}위 코드에서는 useFonts 훅을 사용하여 폰트를 비동기적으로 로드합니다. 폰트가 로드되기 전까지는 스플래시 스크린이 유지되며, 폰트가 로드되면 스플래시 스크린이 숨겨집니다.
이제 폰트가 정상적으로 로드되었으므로, 앱 내에서 해당 폰트를 사용할 수 있습니다. 예를 들어, Text 컴포넌트에서 다음과 같이 폰트를 적용할 수 있습니다.
import { Text, View } from "react-native";
export default function HomeScreen() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text style={{ fontFamily: "Pretendard-Bold", fontSize: 24 }}>
Hello, Expo with Custom Font!
</Text>
</View>
);
}위 예시에서는 Pretendard-Bold 폰트를 사용하여 텍스트를 렌더링합니다.
이제 Expo (React Native)에서 커스텀 폰트를 적용하고 설정하는 방법을 알게 되었습니다.
폰트 사용시 매번 인라인 style 또는 StyleSheet에 폰트 패밀리를 지정하는 대신, AppText와 같은 커스텀 텍스트 컴포넌트를 만들어 사용하는 방법도 있습니다. 이렇게 하면 코드의 중복을 줄이고 유지보수를 쉽게 할 수 있습니다.
import { StyleSheet, Text, type TextProps } from "react-native";
// 폰트 weight 타입 정의
type Weight = "regular" | "medium" | "semibold" | "bold" | "extrabold";
const fontMap: Record<Weight, string> = {
regular: "Pretendard-Regular",
medium: "Pretendard-Medium",
semibold: "Pretendard-SemiBold",
bold: "Pretendard-Bold",
extrabold: "Pretendard-ExtraBold",
};
export function AppText({
style,
weight = "regular",
...props
}: TextProps & { weight?: Weight }) {
return (
<Text
{...props}
style={[
styles.base,
{ fontFamily: fontMap[weight], fontWeight: "normal" },
style,
]}
/>
);
}
const styles = StyleSheet.create({
base: {
// 공통 텍스트 스타일 있으면 여기 추가
},
});이제 AppText 컴포넌트를 사용하여 폰트를 쉽게 적용할 수 있습니다.
import { View } from "react-native";
import { AppText } from "../components/AppText";
export default function HomeScreen() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<AppText weight="bold" style={{ fontSize: 24 }}>
Hello, Expo with Custom Font!
</AppText>
</View>
);
}이렇게 하면 폰트 관리가 훨씬 쉬워지고, 코드의 가독성도 향상됩니다.
이제 Expo (React Native)에서 커스텀 폰트를 효과적으로 적용하고 관리하는 방법을 알게 되었습니다.
Re coding! 🚀
관련 태그