[React] await / async / Promise

async / await

    const getMovie = async () => {
        const json = await (
            await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
        ).json();
        setMovie(json.data.movie);
        console.log(json);
    };

• Promise를 처리할 때 해당 Promise가 처리될 때까지 실행 흐름을 일시 중지하고, Promise가 처리된 이후에 반환된 값을 반환

• 실행 흐름

  • fetch 함수가 반환하는 Promise를 처리

  • json() 함수가 반환하는 Promise를 처리하기 위해 두 번째 await 사용

  • -> fetch 함수가 완료될 때까지 실행 흐름을 일시 중지, 그 결과로 반환된 Response 객체를 처리

  • json() 함수가 반환하는 Promise를 처리하기 위해 두 번째 await 사용 -> Response 객체에서 추출된 JSON 데이터를 처리

Promise

useEffect (() => {
     fetch('https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year')
     .then((response) => response.json())
     .then((json) => {
       setMovies(json.data.movies);
       setLoading(false);
     });
   },[]);

• 비동기 작업의 결과를 처리하는데 사용되며, 작업이 완료되면 이행(Fulfilled) 또는 거부(Rejected)상태로 처리

• 웹 페이지에서 서버로 데이터를 요청했을 때, 데이터를 모두 받기 전에 웹에 출력하려고 하는 경우를 방지하기 위해 활용

• 콜백(함수 자체를 인자로 전달하는 함수) 지옥과 같은 코드가 형성되지 않게 하는 방안으로 도입된 기능

• 프로미스를 이행했을 때 할 일은 .then 을 사용하여 그 다음 작업을 설정