[React Native/Expo] AppLoading 이란? / 사용법

AppLoading 이란?

expo앱을 실행하기 전에, 로딩이 될때까지 기다릴 수 있도록 해주는 expo 라이브러리

( 유저가 앱을 실행했을때, 바로 조작 할 수 있도록 미리 로드 )

 

공식 페이지

AppLoading - Expo Documentation

 

AppLoading 설치

expo install expo-app-loading

 

 

본 게시글에서는, Expo의 아이콘과 폰트를 미리 불러오는 기능을 만들어보겠다.

Expo Font 란?

Expo 앱에서 여러가지 글꼴을 사용할 수 있도록 함 ( 아이콘 사용시 필요 )

 

Expo Font 설치

expo install expo-font

 

Expo 아이콘 종류 ( Expo 프로젝트 사용시 기본으로 설치됨 )

@expo/vector-icons directory

 

---

AppLoading 사용법

// App.tsx ( 엑스포 ts 프로젝트를 기준으로 사용함 )

import { useState } from "react"  // state 생성하기 위한 useState hook 불러오기
import AppLoading from "expo-app-loading";  // AppLoading 라이브러리 불러오기
import { Ionicons } from "@expo/vector-icons";  // Ionicons 불러오기 ( Expo 기본 라이브러리 )
import * as Font from "expo-font"; // 엑스포 폰트 파일 불러오기


export default function App() {
  // 로딩 상태를 체크할 state 만들기 ( true: 로딩중, false: 로딩끝 )
  const [loading, setLoading] = useState(true);
  
  
  // 로딩 중에 불러올 프리로드 만들기 
  cosnt preload = async () => {
    // Ionicons에서 폰트 불러오기
    const fontsToLoad = [Ionicons.font];
    
    // Ionicons에서 불러온 폰트를 사용해, expo-font 프로미스를 불러오고, 배열로 만든다.
    const fontPromises = fontsToLoad.map(font:any => Font.loadAsync(font));
    
    // 위에서 만든 프로미스 배열을 하나하나 실행하고, 끝나면 리턴해준다.
    // 프로세스가 다 끝날때까지 기다려야 하므로, await 사용.
    await Promise.all(fontPromises);   
  }
  
  
  // 프리로드가 끝나면, 로딩 state를 false로 바꾸어준다.
  const onFinish = () => setLoading(false);
  
  
  // 로딩 중일때 실행할 내용 작성
  /*
    startAsync : 로딩 중에 실행할 함수 ( 프리로드 ) 지정하기
    onError : 에러가 났을때 실행할 함수 지정하기
    onFinish : 프리로드가 끝났을때 실행할 함수 지정하기
  */
  if(loading) {
    return (
      <AppLoading
        startAsync={preload}
        onError={console.warn}
        onFinish={onFinish}
      />
    );
    
  // 로딩이 끝났을때 실행할 내용 작성
  return (
    // 간단한 문구 출력
    <View>
      <Text>Hello!</Text>
    </View>
  );
}