react로 api 호출해서 화면에 표시하기!!

useEffect와 useState를 이용해서 api 호출해 화면에 표시한다.

 

useState를 통해 loading의 상태를 업데이트하고,

movies의 목록 상태를 업데이트한다. 

async await를 통해 특정 api url의 response를 json을 가져오고 그것을 setMovies에 넣어준다. 

 

movies.map을 통해 화면에 가져온 데이터에서 title을 화면에 뿌려준다.

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=9&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> : movies.map((movie) => <div key = {movie.id}>{movie.title}</div>)}
    </div>
  );
}

export default App;