Movie App01(async-await, component화, propType)

import logo from './logo.svg';
import temp from './img.png';
import './App.css';
import Movie from './Movie.js';
import { useState, useEffect } 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'
        )
      ).json();
    setMovies(json.data.movies);
    setLoading(false);
  }

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

  return <div>
    {loading ? <h1>Loading...</h1> : <ol>{movies.map((item) => 
      <Movie 
        key={item.id}
        coverImg={item.medium_cover_image}
        title={item.title}
        summary={item.summary}
        genres={item.genres}
      />
    )}</ol>}
  </div>
}

export default App;

import propTypes from "prop-types";

function Movie({coverImg, title, summary, genres}){
    return <li>
        <div>
            <img src={coverImg} alt={title} />
        </div>
        <strong>{title}</strong>
        <p>{summary}</p>
        <ul>
        {genres.map((genresItem) => 
            <li key={genresItem}>{genresItem}</li>
        )}
        </ul>
    </li>
}

Movie.propTypes = {
    coverImg: propTypes.string.isRequired,
    title: propTypes.string.isRequired,
    summary: propTypes.string.isRequired,
    genres: propTypes.arrayOf(propTypes.string).isRequired
}

export default Movie;