✍️ expo-font, expo-app-loading, @expo/vector-icons, expo-linear-gradient 설치 및 사용법 정리

React Native 프로젝트를 Expo 기반으로 진행할 때 자주 사용하게 되는 패키지들의 설치 및 사용법을 정리해두었습니다.
처음 프로젝트를 셋업하거나 기능을 추가할 때 참고용으로 좋습니다 ✅

---

🖋️ 1. 커스텀 폰트 적용 (expo-font)

📦 설치

expo install expo-font

사용법

import { useFonts } from "expo-font";

const [isFontsLoaded] = useFonts({
  "open-sans": require("./assets/fonts/OpenSans-Regular.ttf"),
  "open-sans-bold": require("./assets/fonts/OpenSans-Bold.ttf"),
});

• fontFamily: "open-sans-bold" 로 적용 가능
• ⚠️ 커스텀 폰트를 사용할 때는 fontWeight가 무시되므로 fontFamily로 조절해야 합니다

---

🆚 @expo-google-fonts 방식과의 비교

📦 설치

expo install expo-font @expo-google-fonts/inter

사용법

import {
  useFonts,
  Inter_400Regular,
  Inter_700Bold,
} from "@expo-google-fonts/inter";

const [fontsLoaded] = useFonts({
  Inter_400Regular,
  Inter_700Bold,
});

• 구글 폰트에서 제공하는 다양한 스타일을 손쉽게 적용 가능

• fontFamily: "Inter_700Bold" 와 같이 고정된 이름을 사용해야 함

• .ttf 파일을 직접 관리할 필요 없이 간단히 설치만으로 사용 가능

🔍 차이점 요약

항목	expo-font (로컬 폰트)	@expo-google-fonts (구글 폰트)
폰트 위치	assets/fonts 폴더에 직접 저장	외부 패키지를 통해 관리
이름 정의	원하는 대로 커스텀 가능	정해진 이름(Inter_400Regular 등) 사용 필요
설치 편의성	직접 ttf 파일 다운로드 필요	expo install 만으로 간편 사용 가능
관리 용이성	파일 수동 관리 필요	버전 관리 및 스타일 일관성 확보 쉬움

📌 정리:

• 커스텀 폰트를 로컬에서 직접 쓰고 싶다면 expo-font
• 빠르게 적용하고 다양한 구글 폰트를 쓰고 싶다면 @expo-google-fonts

---

⏳ 2. 앱 로딩 시 스플래시 화면 처리 (expo-app-loading)

expo install expo-app-loading

사용법

import AppLoading from "expo-app-loading";

if (!isFontsLoaded) {
  return <AppLoading />;
}

• 조건을 충족하기 전까지 기본 로딩 화면을 유지시킬 수 있습니다
• 주로 커스텀 폰트 로딩 완료까지 화면을 유지할 때 사용합니다

---

🎨 3. 아이콘 사용 (expo vector-icons)

expo install @expo/vector-icons

사용법

import { Ionicons } from "@expo/vector-icons";

<Ionicons name="add" size={24} color="white" />
<Ionicons name="remove" size={24} color="white" />

• 다양한 아이콘 라이브러리가 포함되어 있습니다
  • Ionicons, FontAwesome, MaterialIcons 등등
• 전체 목록 보기: https://icons.expo.fyi/

---

🌈 4. 배경 그라데이션 적용 (expo-linear-gradient)

expo install expo-linear-gradient

사용법

import { LinearGradient } from "expo-linear-gradient";

// 사용 예시
<LinearGradient
  colors={["#4e0329", "#ddb52f"]}
  style={styles.rootScreen}
>
  {screen}
</LinearGradient>

• 배열 형태로 색상을 넣어주면 자연스럽게 그라데이션 배경이 생성됩니다

---

🧠 정리

목적	패키지
커스텀 폰트	expo-font
로딩 화면	expo-app-loading
아이콘	@expo/vector-icons
그라데이션 배경	expo-linear-gradient

---