[react] Fetching data( async, await )

• Data를 가져와서 사용할때 쓰인다.

async

: 무언가 실행이 완료 되길 기다렸다 다음 코드를 진행 하고 싶을때 사용한다

: 얘는 기다려야만 하는 함수!

 

뭘 기다려? await를!

 

await는 axios가 끝나기를 기다렸다가 그 뒤에 코드를 진행한다.

아래 예시와같은 경우 영화 데이터를 get 해올때까지 기다린다.

 

import React from "react";
import axios from "axios";
import Movie from "./Movie";

class App extends React.Component {
    state = {
        isLoading: true,
        movies: []
    };

    // async : 비동기 -> 너는 기다려야만 하는 함수 ( 기다려야 해! )
    getMovies = async () => {
        //data fetch : 데이터를 가져오다
        //axios : fetch 위에 있는 작은 layer
        //await은 axios 가 끝날때 까지 기다림 
        const { data: { data: { movies } } } = await axios.get("https://yts-proxy.now.sh/list_movies.json?sort_by=rating");

        //{ data: { movies } } } == movies.data.data.movies
        // this.setState({movies : movies}); 이렇게 써야하지만 아래처럼 써도 작동한다 왜냐? javascript는 똑똑하니까
        this.setState({ movies, isLoading: false }); // 위에서 await를 걸어뒀기 때문에 데이터가 다 받아져야만 set이 실행된다
    }

    componentDidMount() {
        this.getMovies();
    };

    render() {
        // js 의 es6
        const { isLoading, movies } = this.state;
        return <div>{isLoading ? "Loading..."
            : movies.map(movie => (
            <Movie 
                key={movie.id}
                id={movie.id} 
                year={movie.year} 
                title={movie.title} 
                summary={movie.summary} 
                poster={movie.medium_cover_image} />
            ))}</div>
    }

}

export default App;

 

---

Movie.js

import React from "react";
import PropTypes from "prop-types";

function Movie({id, year, title, summary, poster}) {
return <h1>{title}</h1>

}

Movie.propTypes = {
    id: PropTypes.number.isRequired,
    year: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    poster: PropTypes.string.isRequired
}

export default Movie;

---

결과 화면