Font(expo-font)

이번에는 사용할 Font를 가져 와 보자.

 

expo-font 중 Ionicons 폰트를 이용할 예정.

 

Font에 대한 자세한 레퍼런스 및 설명은 아래 공식 사이트를 참고

 

https://docs.expo.dev/versions/v46.0.0/sdk/font/

Font - Expo Documentation

설치

npx expo install expo-font

앱이 로딩될때 미리 로딩하기.. AppLoading을 이용

import * as Font from "expo-font";
import {Ionicons} from "@expo/vector-icons";

const isLoading = async() => {
    await Font.loadAsync(Ionicons.font);                            // 앱이 시작될때 Ionicons.font를 preloading 
}

만약에 불러올 폰트가 여러개라면?????

const isLoading = async() => {
    await Font.loadAsync(Ionicons.font);                         
    await Font.loadAsync(FontAwesome.font);                          
}

이런식으로 할수도 있겠지만...  더 많으면 지저분 해 질수 있다.  그래서... 

const loadFonts = (fonts) => fonts.map(font => Font.loadAsync(font));
const isLoading = async() => {
    const fonts = loadFonts([Ionicons.font, FontAwesome.font]);
}

이렇게 사용 가능 

# hook 사용

 

이번에는 훅을 사용하는 방식을 살펴보자 

const [font] = Font.useFonts(Ionicons.font);

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

이렇게도 사용이 가능하다 . 

 

단, hook을 사용할 경우 단순히 font를 로딩하는것만 가능하다. 그 외 미리 추가 작업을 해야한다면 hook보단 api 방식을

 

사용해야 한다. 

 

해당 작업에 따라 적절히 하용하면 되겠다. 

 

난 그냥 API 방식으로 사용하는걸로.. ㅎㅎ