09. Practice Movie App - part One

import logo from './logo.svg';
import './App.css';
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_ration=8.8&sort_by=year`)).json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  
  useEffect(()=>{

  //fetch 대신에 요즘 async-await를 사용한다.
    /* 
    fetch(`https://yts.mx/api/v2/list_movies.json?minimum_ration=8.5&sort_by=year`)
    .then(response => {
      response.json()
      .then((json) => {
        setMovies(json.data.movies)
        setLoading(false);
      });
    }); 
    */

    getMovies();


  }, []);

  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>
  );
}

export default App;

 

practice-movie-app.z01

19.53MB

practice-movie-app.z02

19.53MB

practice-movie-app.z03

19.53MB

practice-movie-app.z04

19.53MB

practice-movie-app.zip

6.20MB