🚶🏻#24 [React & RN] - 앱이 실행되기 전 Preload 하는 방법

Apploading

/* 설치법 */
expo install expo-app-loading

/* 사용법 */
import AppLoading from 'expo-app-loading';

• RN 은 기본적으로 앱이 로딩중 일때 splash 이미지를 보여준다
• Apploading 을 사용하면 앱이 실행되기 전에 font, image, 앱 실행 시 필요한 DB 정보 등등 필요한것들을 불러올수 있다

---

Case 01 - Apploading Props 사용하기

import AppLoading from "expo-app-loading";
import React, { useState } from "react";
import * as Font from "expo-font";
import { Text, Image } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { Asset } from "expo-asset";

export default function App() {
  const [ready, setReady] = useState(false);
  const onFinish = () => setReady(true);
  const startLoading = async () => {
    await Font.loadAsync(Ionicons.font);
    await Asset.loadAsync(require("./my-face.jpeg"));
    await Image.prefetch("https://reactnative.dev/img/oss_logo.png");
  };
  if (!ready) {
    return (
      <AppLoading
        startAsync={startLoading}
        onFinish={onFinish}
        onError={console.error}
      />
    );
  }
  return <Text>We are done loading!</Text>;
}

• Apploading Component 는 startAsync, onFinish, onError 3가지 Props 를 가지고있다
• startAsync 의 Type 은 () => Promise<void> 이며, startAsync 가 완료되고 나면 onFinish 가 실행된다
• 위 소스를 예로 들면 async startLoading() 내부에 있는 각각의 await 들이 다 완료 되면, onFinish() 내부의 setReady(true) 로 state 값을 변경해주며 앱 로딩이 완료된다

---

Case 02 - 불러와야할 폰트가 많다면?

import AppLoading from "expo-app-loading";
import React, { useState } from "react";
import * as Font from "expo-font";
import { Text, Image } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { Asset } from "expo-asset";

export default function App() {
  const [ready, setReady] = useState(false);
  const onFinish = () => setReady(true);
  const loadFonts = (fonts) => fonts.map((font)=> Font.loadAsync(font));  	
  const loadImages = (images) => images.map((image)=> Asset.loadAsync(image));
  const startLoading = async () => {
    const fonts = loadFonts([Ionicons.font]);
    const images = loadImages([
      require("./my-face.jpeg"),
      "https://reactnative.dev/img/oss_logo.png",
    ]);
    await Promise.all([...fonts, ...images]);
  };
  if (!ready) {
    return (
      <AppLoading
        startAsync={startLoading}
        onFinish={onFinish}
        onError={console.error}
      />
    );
  }
  return <Text>We are done loading!</Text>;
}

• 미리 불러올 폰트와 이미지 배열을 파라미터로 받는 함수 loadFonts(), loadImages() 를 만든다
• Case 01 에서는 불러와야할 것들 각각에 await 를 추가해줬지만, 이번엔 await Promise.all() 을 사용하여 필요한 것들을 불러온다
• Promise.all() 함수는 인자값으로 배열을 받는다

---

Case 03 - react hook 사용하기

import React from "react";
import AppLoading from "expo-app-loading";
import * as Font from "expo-font";
import { Text } from  "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useAssets } from "expo-asset";

export default function App() {
  const [assets] = useAssets([require("./my-face.jpeg")]);
  const [loaded] = Font.useFonts(Ionicons.font);
  if(!assets || !loaded){
  	return <Apploading />;
  }
  return <Text>We are done loading!</Text>;
}

• useAssets 와 useFonts 를 사용하여 불러오는 방법이다
• 로딩 함수를 사용할수 없어서 간단하게 폰트와 이미지를 불러올때 사용하면 좋을것같다