[React] movie_app//8. await

class App extends Component {

state = {

}

componentDidMount(){

this._getMovies()

}

_renderMovie = () => {

const movies = this.state.movies.map(movie =>{

return <Movie title={movie.title} poster={movie.large_cover_image} key={movie.id} />

})

return movies

}

_getMovies = async () => {

const movies = await this._callApi() //결국 return값으로 json.data.movies를 받음

this.setState({

movies : movies

})

}

_callApi = () =>{

return fetch('https://yts.am/api/v2/list_movies.json?sort_by=rating')

.then(response => response.json())

.then(json => json.data.movies)

.catch(err => console.log(err))

}

render() {

return (

<div className="App">

{this.state.movies ? this._renderMovie() : 'Loading'}

</div>

);

}

}

componentDidMount에서 여러번의 .then을 가졌었는데,

then이 많아지면 CallBackHell이라는 오류가 생긴다드라.

그래서 펑션 하나를 만들어서 then을 넣고, await을 이용하여 사용한다고 한다.

정리해보면

fetch로 call api(데이터베이스를 불러옴)했고

componentDidMount는 _getMovies를 불러오는데

_getMovies는 비동기화함수이다.

그안에 movies라는 cosnt variable을 생성하고 

그 안에 callApi가 종료되고 return되는 어떤 값을 받기를 await한다.

이 데이터는

_callApi의 json.data.movies다.

그리고 컴포넌트의 state를 movies로 set했음

그리고 state에 값이 생겼었으므로

_renderMovie()가 실행되고

이는 state의 movies데이터를 맵핑하여 새로운 행렬을 리턴한다.