컴포넌트와 상태를 이용한 로딩화면 만들기

앱 운영에 있어서 로딩화면은 자주사용되고 있으므로 확실히 이해하고 넘어가자.

오류 발생원인은 화면은 그려졌는데 준비된 데이터가 없는경우 발생한다.

 

Loading.js 에 간단한 로딩화면을 만들어보자.

---

import React from 'react'; 

import {View,Text,StyleSheet} from 'react-native'; 
 
export default function Loading(){     

    return(

      <View style={styles.container}>

           <Text style={styles.title}>준비중입니다...</Text>

       </View>)

} 
 

const styles = StyleSheet.create({     

    container: {         

//앱의 배경 색         

     flex:1,         

     justifyContent:'center',         

     alignItems:'center',         

     backgroundColor: '#fdc453',     

},     

     title: {         

     fontSize:20,         

     fontWeight:'700'     

} 

---

컴포넌트폴더에 간단한 로딩화면을 만들어주었으니!!

이제 메인화면에 적용해보자!

 

1. import Loading from '../components/Loading';

   불러와서 사용하기 위해 임포트 해주는걸 잊지말자!

 

2. const [ready, setReady] = useState(true)

   로딩화면을 사용하기위해 컴포넌트에 상태값을 만들어주자. 상태이름과 함수는 자유롭게 만들어주면된다. 

   초기 상태값으로 리스트, 참거짓형, 딕셔너리, 숫자 등 다양하게 들어갈 수 있다.

 

3.   useEffect(()=>{        

     //뒤의 1000 숫자는 1초를 뜻함     

    //1초 뒤에 실행되는 코드들이 담겨 있는 함수     

          setTimeout(()=>{         

                  setState(data)         

                  setReady(false)     

           },1000)          

},[]) 

 

useEffect()를 통해 화면이 그려진 다음 가장먼저 실행될 함수를 작성하며, setTimeout()함수를 통해 1초뒤에 함수를 실행한다. data를 준비하고, setReady 값을 fasle로 바꾸라!

 

4.  return ready ? <Loading/> :  ( 

     ....

     )

 

처음 ready 값은 true 이므로 ? 뒤에 <Loading/> 이 실행이 된다. 

그런다음 useEffect()함수를 통해 데이터를 준비하고 ready값을 false로 변경하면 그때 : (콜론) 뒤에 값이 반환되어 화면이 그려진다!