[React] #7.3 Movie App part One

import { useEffect, useState } from 'react';

function App() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async() => {
    const json = await(
      await fetch( //then과 같은 await
        `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
      )).json();

    setMovies(json.data.movies);
    setLoading(false);
  }
  useEffect(() => {
    getMovies();
  }, []);
  //Array.map()은 기존 array를 내가 원하는 대로 변형된 item으로 바꾼 새로운 array로 가져와줌 
  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;

실행화면