[React-native] AppLoad 로딩 페이지 만들기

리액트 네이티브에서 로딩 페이지를 만들어보자. 기본적으로 데이터를 받아오기 전에 화면을 띄우면 안된다. 따라서 화면이 뜨기 전까지 이미지나 데이터를 전부다 받기 전까지는 로딩페이지를 띄워야 한다.

 

 

0. 들어가면서

react native의 환경은 아래와 같은 환경이다.

$ npx create-react-native-app

 

 

1. 설치

$ expo install expo-app-loading

만약 create-react-native-app으로 설치한게 아니라 bare한 react-native라면 여기를 눌러 추가 설치를 해야한다.

 

2. 사용

우선 app.js를 아래와 같이 수정해 보자.

import AppLoading from 'expo-app-loading';
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  const [isReady, setIsReady] = useState(false);
  if (!isReady) {
    return (
      <AppLoading />
    )
  }
  return (
    <View style={styles.container}>
      <Text>Open up App.js to stgz on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

위의 코드는 기본 코드에서 아래의 코드만 추가를 한것이다.

  const [isReady, setIsReady] = useState(false);
  if (!isReady) {
    return (
      <AppLoading />
    )
  }

 

AppLoading이 되고 있나 우선 확인을 해보자. 

 

if (!isReady) { 부분을 if (isReady) {으로 변경해보자. Text 태그 안의 내용이 아래와 같이 보인다면, 연결은 성공한 것이다.

 

 

이제 연결을 했으니 디테일한 여러 설정들을 해보자. 기본 컨셉은 위에서 말한데로 이미지나 비동기 데이터가 다 들어온 이후에 화면을 보이게 렌더를 하는것이다. 이러한 것들을 쉽게 하기위한 여러 props들이 있다.

 

3. 응용

AppLoading를 사용하면서 이용되는 props를 알아보면서 좀 더 깊게 알아보는 과정을 거쳐보자. 기본적은 로직은 AppLoading이 시작되면서 우선은 startAsyn을 호출한다. 그 이후에 onFinish 함수가 호출된다고 할 수 있다. 즉 startLoading가 await를 하는 모든 로딩을 담당하는 부분이라 할 수 있다.

 

import AppLoading from 'expo-app-loading';
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  const [isReady, setIsReady] = useState(false);
  const onFinish = () => setIsReady(true);
  const startLoading = async () => {
    await new Promise((resolve) => setTimeout(resolve, 10000))
  };
  if (!isReady) {
    return (
      <AppLoading 
        startAsync={startLoading}
        onFinish={onFinish}
        onError={console.error}
      />
    )
  }
  return (
    <View style={styles.container}>
      <Text>Open up App.js to stgz on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

1. AppLoading 실행
2. splash screen을 비춤
3. 바로 startAsync 호출
4. startAsync 완료 후 onFinish 호출
5. state를 true로 변경.
6. AppLoading 안 보인다.

 

 

startAsync

기본적으로 필요한 데이터나 이미지 등의 로딩이 완료 됐을 때 Promise를 리턴한다. onError도 같이 넣어줘야한다.

 

onFinish

만약 startAsync를 사용했다면 필수적으로 사용해야한다. startAsync가 종료 된 후에 실행된다. 따라서 state를 설정하거나 AppLoading 컴포넌트를 비활성화 하는데 사용된다.

 

onError 

startAsync가 error를 발생한다면, 그 에러는 onError로 온다.