useFonts()

React Native 애플리케이션에서 사용되는 useFonts() 을 통해 폰트를 로드하는 예시를 보겠습니다. 기본 템플릿을 설치하면 다음의 코드를 app>_layout.tsx>RootLayout() 에서 볼 수 있습니다.

 

import { useFonts } from 'expo-font';

const [loaded, error] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
    ...FontAwesome.font,
  });
  
  useEffect(() => {
    if (error) throw error;
  }, [error]);

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

 

1. useFonts 훅을 사용하여 폰트를 로드합니다.
2. SpaceMono 폰트는 로컬 파일 시스템에 있는 SpaceMono-Regular.ttf 폰트 파일을 로드합니다. 해당 파일은 앱의 assets/fonts 폴더에 있어야 합니다.
3. FontAwesome.font는 Expo의 expo-font 라이브러리에서 가져온 FontAwesome 폰트 설정입니다. 이 설정은 Expo가 기본적으로 포함하는 FontAwesome 아이콘을 사용할 수 있도록 합니다.
4. useFonts 훅은 두 가지 값을 반환합니다:

• loaded: 폰트 로드가 완료되면 true로 설정됩니다.
• error: 폰트 로드 중 발생한 에러가 있다면 해당 에러 객체를 포함하고, 그렇지 않으면 undefined입니다.