fetch.then()을 async, await로 변환하기

* 1번 코드 [ fetch, then() ]를 2번 코드[ async, await ]로 변환하기

 

import './App.css';
import { useEffect, useState } from 'react';

function App() {
  const [loading, setLoading] = useState(true);
  const [movie, setMovies] = useState([])
  const getMovie = async() => {

1번 아래코드------------------------------------------------------------------------   
    fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`)
    .then(response => response.json())  << # 1
    .then(json => {                     << # 2
      setMovies(json.data.movies)
      setLoading(false);
      

2번 아래코드-----------------------------------------------------------------------
설명 : 함수의 parameter로 들어가는 값을 상수(const)로 설정해주면 됨
       위의 1번 코드에서 #1번에 해당하는 parameter(여기서는 response)를 
       아래와 같이 상수로 설정하고, 뒤에 await fetch 이어서 작성하면 됨
       
       #2도 마찬가지로, parameter로 들어가는 값(여기서는 json)을 상수로 지정해주고,
       await response.json()작성하면 됨

    const response = await fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`)
    const json = await response.json();
    setMovies(json.data.movies)
    setLoading(false);
    })
  }
  
  useEffect(() => {
      getMovie();
  }, [])
  console.log(movie);
  return (
    <div>
    {loading ? <h2>Loading...</h2> : null }
    </div>
  );
}

export default App;