data fetching 시간 확인하여 loading 화면 보여주기

디자인

---

데이터가 들어오기 전까지 빈 화면.
데이터가 1.5초 이상 걸리면 로딩 띄우고, 이하면 바로 데이터 보여주기.

---

기존코드

React.useEffect(()=>{
if(!id) return;
 getData()
},[id])

바뀐코드

추가 state
const [loading, setLoading] = React.useState<boolean>(true)
const [loadingCheck, setLoadingCheck] = React.useState<boolean>(false)
const loadingRef = React.useRef<boolean>(loading) --> 로딩을 추적

// 1.5초 이후 
1. React.useEffect(()=>{
if(!id) return;
getData()
const timeOut = setTimeout(()=>{
	if(loadingRef.current){
    	setLoading(true);
        setLoadingCheck(true);
	    }
	},1500)
	return () => clearTimeout(timeOut)
},[id])


// 데이터 로딩 업데이트
2. React.useEffect(() => {
    loadingRef.current = loading;
  }, [loading]);
  
 
 // 데이터 패치
3. const getData = React.useCallback(()=>{
		data fetching;
        if(loadingCheck){
        	setTimeout(()=>{
            	setLoading(false);
            },2000)
        }
        setLoading(false)
},[])
  

loadingCheck이 false고, loading이 true 빈화면
loadingCheck과 loading 둘 다 true면 loading 화면
loadingCheck이 true고, loading이 false면 데이터 패치된 화면을 보여준다.

---

// 1.5초 이후 
1. React.useEffect(()=>{
if(!id) return;
getData()
const timeOut = setTimeout(()=>{
	if(loadingRef.current){
    	setLoading(true);
        setLoadingCheck(true);
	    }
	},1500)
	return () => clearTimeout(timeOut)
},[id])

• 데이터를 호출하고, setTimeout을 이용해서 1.5초 뒤에 loadingRef 가 true면 loaidng을 true로 유지시키고, loadingCheck을 true로 바꿔서 로딩화면을 띄운다.
  만약 1.5초 뒤에 loadingRef가 false면 loading 화면이 안뜨고 데이터가 패치된 화면이 뜬다.

---

// 데이터 로딩 업데이트
2. React.useEffect(() => {
    loadingRef.current = loading;
  }, [loading]);

• 1.5초 뒤에 loading의 상태가 바뀐 걸 알 수가 없기 때문에 loading 상태가 바뀔 때마다 인지할 수 있도록 한다.

---

 // 데이터 패치
3. const getData = React.useCallback(()=>{
		data fetching;
        if(loadingCheck){
        	setTimeout(()=>{
            	setLoading(false);
            },2000)
        }
        setLoading(false)
},[])

• 데이터 패치 완료 후, 1.5초가 지났으면 loadingCheck 상태가 true로 바꼈을테니 loading 화면이 2초이후에 사라지도록 한다.
  1.5초가 지나지 않았으면 loadingCheck 상태가 false 일테니 loading 화면 안보여지고, 빈화면에서 데이터 패치된 화면으로 보여준다.

---