ReactJS_7_Async_Await

1. 개념

Async Await는 우리가 작성한 코드들을 좀 더 분명하게 해준다.
then을 계속해서 쓰면 헷갈리고 어려워진다 -> async await를 통해 처리하자.

• async: 비동기 방식으로 작업이 진행된다.
• await: 결과 값을 기다려서 받은 후에 작업이 진행된다.

바로 예제 코드를 보도록 하자.

2. 영화앱

참고사항

  state = {
  }

  componentDidMount(){
   this._getMovies()
  }

// DidMount를 크게 만들지 않기 위해 나누기! 
  _getMovies = async() => {
    // const movies의 값은 await 로 함수의 결과값을 기다린다 
    const movies = await this._callApi()
    this.setState({
      movies
    })
  }

  _callApi = () => {
    return fetch("https://yts.lt/api/v2/list_movies.json?sort_by=rating")
      .then(potato => potato.json()) 
      .then(json => json.data.movies)
      .catch(err => console.log(err))
  }

_renderMovies = () => {
	// 여기서 Key 값을 바꾸는 것은 index는 너무 오래걸리기에 id로 대체한 것이다!
    const movies = this.state.movies.map((movie) => {
    return <Movie title={movie.title} poster={movie.large_cover_image} key={movie.id} /> //key값을 id값으로 부여
  })
  return movies
}