7.3 Movie App part One

이제 영화 프로젝트를 진행해보자~!

먼저 영화들을 다 보여주자!

 

먼저 아래 사이트에 접속하여 API를 가져오자.

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

https://yts.mx/api

API Documentation - YTS YIFY

그럼 로딩을 만들어주고,

API 값에 대해 fetch로 받아오면 아래와같이 Console에 찍히는 것을 확인할 수 있다.

 

 

그럼 이 movies를 출력해보자

그럼 다음과 같이 출력된다.

 

근데 여기서 로딩을 끝냈기 때문에 setLoading을 false로 만들어야한다는거을 잊으면안된다!!

전체코드

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  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);
      });
  }, []);
  console.log(movies);
  return <div>{loading ? <h1>Loading...</h1> : null}</div>;
}

export default App;

 

 

근데 여기서 then이아닌

좀 더 보편적으로 사용하는 async-await를 사용하자!!

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async () => {
    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(() => {
    getMovies();
  }, []);
  console.log(movies);
  return <div>{loading ? <h1>Loading...</h1> : null}</div>;
}

export default App;

근데 이것또한 느리다면

await를 추가해주고 json을 덧붙여주고 const로 선언했던 json을 지워주면된다.

김밥같이 await를 감싸는 또 다른 await가 있다고 생각하면된다.

import { useEffect, useState } from "react";

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

export default App;

근데 콘솔에 두번 출력하게 되는데(App.js)

다음과 같이 두번 호출했기때문이다

자 그러면 map을 사용해서 화면에 띄워보자.

조금 더 들고와보자.

우리가 여기서 한것은 결국 state로 받은 data를 보여준 것 뿐이다.

state는 api로부터 받은 것이고!

 

그럼 어느정도 정보는 다 들고온 것 같다!