fetch로 데이터 받아오기

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_rating=8.8&sort_by=year`
      )
    ).json();
    setMovies(json.data.movies);
    setLoading(false);
  }
  

fetch 로 해당 주소에 네트워크 요청하기. 주소에 데이터를 가져오는것은 시간이 많이 걸리기 때문에 await을 이용해 비동기 처리 해준다. .json으로 바꿔줄때도 비동기처리 해줘야해서 await이 두번 쓰이게 됐다.
데이터를 받아오면 해당 데이터의 movies 정보들을 가져오고, 로딩을 false로 바꿔 로딩 화면을 바꿔준다.

async 함수는 여러 promise의 동작을 동기스럽게 사용할 수 있게 해주는 함수이며 await 은 async 안에서만 사용 가능하다.

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

로딩될 때 getMovie 함수를 실행하여 처음 한번만 데이터를 받아온다.

  
  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;

화면에 어떻게 그려질 지 정하는 코드.
데이터를 받아오기 전에는 loading 이 true 이므로 로딩 화면이고, 데이터 받아오면 map 을 이용해 movies(받아온 데이터 저장) 의 배열 속 요소들을 차례로 화면에 그려준다 .

Array.prototype.map()
map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

레퍼런스
map mdn
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

async mdn
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function