에러화면, 로딩화면 구현 (1)

( 로딩화면에 이미지 사용시, 추가 링크 : https://radpro.tistory.com/61 )

 

1. 목적 : 

에러화면, 로딩화면을 useEffect로 구현하던 기존 방식을 따로 정리하려고 한다.

 

2. 준비사항 : 

useState와 useEffect를 import해두기

ActivityIndicator도 import해두기

*기호에 따라 로딩화면도 import해두기

 

3. 적용방법

 ㄱ. import해주기

import React, { useState, useEffect } from 'react';
import { ActivityIndicator, ... } from 'react-native';

 ㄴ. useState 선언해두기

export default function Users() {
    const [loading, setLoading] = useState(true); // 로딩 화면 mount시키기 위한 useState
    const [error, setError] = useState(null);
    ...

 ㄷ. useEffect부분에 추가해주기

   - 일단, setLoading(true); 걸어둔다. 되는 거 없음 로딩하라는 뜻

   - useEffect로 실행할 함수를 넣어주고, 실행되면 로딩이 끝나게 setLoading(false); 걸어준다.

     (보통 .then( ) 문에 넣으면 된다.)

   - .then문 등의 마지막에 .catch문을 넣어주고, 예제와 같이 에러 상태 코드를 넣어준다.

	예제

    useEffect(() => {
        setLoading(true);

        firebase_db.ref('/items')
            .once('value')
            .then((snapshot) => {
                console.log("파이어베이스에서 데이터 가져왔습니다!!")
                let items = snapshot.val()
                setState(items)

                setFullData(items.snippet);

                setLoading(false);
            })
            .catch(err => { setLoading(false); setError(err); })
    }, []);

 ㄹ. 로딩상태나 에러상태일 때 실행해줄 함수를 if문으로 만들어준다.

     예제와 같이 복붙하고, <ActivityIndicator>모양, 내용, 스타일 등만 수정하면 된다.

    //ActivityIndicator는 로딩 중 돌아가는 동그라미
    if (loading) {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <ActivityIndicator size="large" color="#5500dc" />
            </View>
        );
    }


    //fetching 중 에러가 나면 나올 안내화면
    if (error) {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text style={{ fontSize: 18 }}>
                    {`fetching 에러다 욘석아~
                     네트워크를 확인해보렴!`}
                </Text>
            </View>
        );
    }

끗