처음 프로그램을 켰을 때 데이터가 준비되지 않은 문제는 자주 발생하는 문제
(여기서는 useState(상태)에서 초기에 데이터가 할당되지 않아서 발생하는 문제)
https://velog.io/@odesay97/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EA%B8%B0%EC%B4%88%EC%A7%80%EC%8B%9D-3-%EC%83%81%ED%83%9CuseState-useEffect
--> 마지막 참고
이에 대한 해결책도 다양하다.
해결책 중 하나 --> 앱이 켜질 때 초기화면 전에 로딩화면을 준비하여, 로딩화면이 돌고 있는 동안 데이터를 준비한다.
해결책
방법 1) --> 로딩화면 구현으로 화면을 한번 겉돌아서 useEffect가 실행되게 만듬
방법 2) --> useState생성시 의미없는 초기값을 설정하여 useState를 초기화한다. 이후 useEffect에서 진짜 데이터를 넣는다.
예) 로딩을 통해 상태 초기화 문제 해결
--> 위 링크의 최하단 중요 문제점의 해결방안
import React,{useState,useEffect} from 'react';
import main from '../assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';
import data from '../data.json';
import Card from '../components/Card';
import Loading from '../components/Loading';
export default function MainPage() {
console.disableYellowBox = true;
//return 구문 밖에서는 슬래시 두개 방식으로 주석
const [state,setState] = useState([])
//컴포넌트에 상태를 여러개 만들어도 됨
//관리할 상태이름과 함수는 자유자재로 정의할 수 있음
//초기 상태값으로 리스트, 참거짓형, 딕셔너리, 숫자, 문자 등등 다양하게 들어갈 수 있음.
const [ready,setReady] = useState(true)
useEffect(()=>{
//뒤의 1000 숫자는 1초를 뜻함
//1초 뒤에 실행되는 코드들이 담겨 있는 함수
setTimeout(()=>{
setState(data)
setReady(false)
},1000)
},[])
// let tip = data.tip;
let tip = state.tip;
let todayWeather = 10 + 17;
let todayCondition = "흐림"
//처음 ready 상태값은 true 이므로 ? 물음표 바로 뒤에 값이 반환(그려짐)됨
//useEffect로 인해 데이터가 준비되고, ready 값이 변경되면 : 콜론 뒤의 값이 반환(그려짐)
return ready ? <Loading/> : (
/*
return 구문 안에서는 {슬래시 + * 방식으로 주석
*/
<ScrollView style={styles.container}>
타임아웃 함수
setTimeout(()=>{ 실행될 내용 },1000)
--> 1초 기다린 후 내용이 실행됨
1) 두 개의 상태(state)
const [state,setState] = useState([])
--> 데이터를 관리하는 상태(state)
const [ready,setReady] = useState(true)
--> 초기 데이터가 위의 state(상태)에 할당되어 준비됬는지 확인하기 위한 상태(ready)
--> 아래의 ready(상태)의 경우, 처음에 상태값 true를 줘서 처음엔 준비가 안 되있다는 것을 나타낸다.
[상태의 특징]
1) 컴포넌트에 상태를 여러개 만들어도 됨 2) 관리할 상태이름과 함수는 자유자재로 정의할 수 있음 3) 초기 상태값으로 리스트, 참거짓형, 딕셔너리, 숫자, 문자 등등 다양하게 들어갈 수 있음.
2) useEffect 함수를 통해 상태(state)에 데이터 할당
useEffect(()=>{ setTimeout(()=>{ setState(data) setReady(false) },1000) },[])
--> 뒤의 1000 숫자는 1초를 뜻함
--> 1초 뒤에 실행되는 코드들이 담겨 있는 함수
---> 즉, return으로 화면이 그려지면 1초의 딜레이 후 state(데이터를 넣기 위한 상태)가 data(Json파일)로 할당되고,
ready(state 상태에 데이터가 할당되어 메인 화면이 그려진 준비가 되었는지 확인하기 위한 상태) 가
false가 되어 메인화면을 그리기 위한 데이터가 준비되었다는 것을 나타내어 준다.
//처음 ready 상태값은 true 이므로 ? 물음표 바로 뒤에 값이 반환(그려짐)됨
//useEffect로 인해 데이터가 준비되고, ready 값이 변경되면 : 콜론 뒤의 값이 반환(그려짐)
return ready ? <Loading/> : (
3) return에 삼항연산자를 통해 로딩화면과 메인화면 나눔
return ready ? <Loading/> : (
--> 처음 ready 상태값은 true 이므로 ? 물음표 바로 뒤에 값이 반환(그려짐)됨
--> useEffect로 인해 데이터가 준비되고, ready 값이 변경되면 : 콜론 뒤의 값이 반환(그려짐)
--> 즉
1) return이 실행되면 ready의 초기 상태값은 true 이므로 화면에 Loading 엘리먼트(위에서 import해 온)가 그려지고,
2) 이후 useEffect 함수가 실행되어 state(상태)에 data(Json파일)을 할당한 다음, ready의 상태값이 false로 바뀐다.
3) ready는 상태이며 상태의 내용에 변화가 있으면 화면을 다시 그리기 때문에 다시 return이 실행되는데 이번에는 ready의 상태값이 false이므로 메인화면이 화면에 정상 출력되는 것
[삼항 연산자]
a = 조건 ? 참항 : 거짓항
--> 조건이 참이면 a = 참항, 조건이 거짓이면 a = 거짓항