⚛️React Training - section06 : fetch, await/async - Movie Web

이번 시간에는 영화 웹사이트를 만드는 연습을 해볼 것이다. 지금까지 배운 것들의 반복이기에 복습 연습을 한다고 생각하고 포스팅을 보면 좋을 것 같다.
먼저 API를 연결 해야한다. 해당 API는 yts라는 영화 정보 사이트에서 받아 올 수 있다. 아래 코드를 살펴보자.

import { useEffect, useState } from "react";

export default function SubApp() {

  const [loading, setLoading] = useState(true);

  const [movies, setMovies] = useState([]);

 

  useEffect(() => {

    fetch(

      `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`

    )

      .then((res) => res.json())

      .then((json) => {

        setMovies(json.data.movies);

        setLoading(false);

      });

  }, []);

 

  console.log(movies);

 

  return (

    <div>{loading ? (

      <h1>Loading...</h1>

    ) : (

      <div>

        {movies.map((movie) => (

          <div key={movie.id}>

            <img src={movie.medium_cover_image} />

            <h2>{movie.title}</h2>

            <p>{movie.summary}</p>

            <ul>

              {movie.genres.map(g => <li key={g}>{g}</li>)}

            </ul>

          </div>

        ))}

      </div>

    )}

    </div>

  )

}

 

우리가 기본적으로 사용하는 방식이다. useEffect를 사용해서 fetch로 API 호출이 완료되면 Loading이라는 문구가 사라진다. 여기서 fetch로 가져온 API를 useState인 setMoives로 값을 저장하고 해당 값을 jsx문법으로 필요한 데이터 정보들을 원하는 위치 태그에 기입을 하면 되는 것이다. 이 방법은 우리가 기존에 해왔던 방법들이라 익숙 할 것이다. 하지만 이 방법 이외에도 async, await이라는 구문을 사용해서 값을 가져올 수 있다.

 

const getMovies = async () => {

    const res = await fetch(

      `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`

    );

    const json = await res.json();

    setMovies(json.data.movies);

    setLoading(false);

  };

  useEffect(() => {

    getMovies();

  }, []);

 

async와 awati은 js의 중급 정도 되는 문법이다. 비동기 문법으로 fetch가 res변수에 도달 할때까지 기다린다. 그렇게 완료가되면 async의 규칙으로 promise를 반환하게 된다. 그렇게 반환되고 나면 res에는 API가 담겨있고 이를 다음 json변수에서 json파일로 읽을 수 있게 변환한다 역시다 변환이 완료되고 나면 그 다음구문들을 완료하고 useEffect를 통해서 브라우저에서 한번 실행하게 되는 것이다. 이것을 조금 더 간단하게 작성한다면 아래와 같다.

 

  const getMovies = async () => {

 

    const json = await (await fetch(

      `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`

    )).json();

 

    setMovies(json.data.movies);

    setLoading(false);

  };

 

이렇게 movie API를 가지고 데이터를 호출하는 방법들을 살펴 보았다. API를 불러오는 과정에 익숙하지 않다면 충분히 어렵게 느껴 질 수 있다. 그러니 여러번 호출을 해보고 여러번 응용을 해보면 좋을 것같다.