번외 ) loading

Fetch나 Axios 를 사용할 때 데이터를 받아오는 시간 동안 띄울 화면을 만들기

 

- 사용자에게 화면이 보여지기 전에 로딩중이라는 표시를 보여줌으로써 사용자는 조금 더 기다릴 수 있는 시간을 갖게 됨
- 처음엔 로딩을 true설정해서 임시 화면을 띄워놓고 데이터를 모두 가져오면 false로 변경

      => 기존 리턴에 작성한 html을 보여줌

 

const [loading, setLoading] = useState(true);

useEffect(() => {
    axios.get('https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year')

    .then(res => {
        setMovies(res.data.data.movies) // {}들에서 data를 가져 옴

        //영화 데이터 모두 가져오면 로딩중을 false로 변경
        setLoading(false);
    })
    .catch(e => {
        alert("에러 발생 : " + e);
    })
}, []);


if(loading) return <div>로딩중입니다.</div>;

if(loading) {
    return (
        <div>로딩중입니다.</div>
    )
}

둘이 같음
-> react에서도 innerHTML을 사용할 수 있음