API FETCH 및 로딩 구현 복습

기본 틀에서 다시 로딩 구현 부분과 API Fetch 부분을 연습해 본다

영화 목록을 가져온다

 

import { useState, useEffect } from 'react';

function App() {

  return (
    <div>

    </div >
  );
}

export default App;

 

api url 

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

 

  useEffect(() => {
    fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year")
      .then((response) => response.json())
      .then(json => {
        console.log(json);
        setMovies(json);
      })
  }, []);

  const getMovies = async () => {
    const response = await fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year");
    const json = response.json();

  }
  useEffect(() => {
    getMovies()
  }, []);

 

연습

// 방법 1
useEffect(() => {
    fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year")
      .then((response) => response.json())
      .then(json => {
        console.log(json.data.movies);
        setMovies(json.data.movies);
      });
  }, []);


// 방법 2 
  const fetchJson = async () => {
    const response = await fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year")
    const json = await response.json();
    console.log(json.data.movies);
    setMovies(json.data.movies);
  }

방법 2에서 await response.json() 부분의 await을 잊지말고 작성하기