[React] 영화정보 api fetch 하기

학습일 : 2023. 03. 19

---

이번에는 영화정보를 fetch 로 불러오는 걸 해볼 것이다.

저번에 학습한

 

fetch하기를 이용할 것이고

이번 또한 api를 페이지 로드시 딱 한번만 로딩시키고 말 것이기 때문에

 

useEffect를 사용하여

마지막에 빈배열을 적어줄 것이다.

 

영화정보는 아래 사이트에서 불러올 것이다.

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

fetch시 백틱 안에 넣어주면 된다.

 

 

 

 

<App.js>

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true); // 기본값 true

  // 한번만 실행됨
  useEffect(() => {
    fetch(
      ` https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year `
    )
      .then((response) => response.json())
      .then((json) => console.log(json));
  }, []);


  return <div>{loading ? <h3>로딩 중...</h3> : null}</div>;
}

export default App;

 

 

 

개발자 도구를 보면
object중 
data 안 movies 정보를 불러왔음을 알 수 있고
이를 불러오려면

json.data.movies 로 불러올 수 있음을 유추해볼 수 있다