[ReactJS] [Movie App] - 1 영화 API 가져와서 화면에 출력 (then 대신에 async-await, map)

then 대신에 이제는 await - async 를 사용해 볼 것이다.

then 과 같은 거고 조금 더 보기 좋아줬을 뿐이다. 

 

await 안에 await를 써주어 다음과 같이 축약해 줄 수도 있다.

 

콘솔 창에서는 아래와 같이 두번 보이는데 그 이유는

 

setMovies 와 setLoading으로 각기다른 state지만 두번 수정해주었기에 랜더링도 2번 일어난 것이다.

 

화면에 어떻게 보여줄까? 정답 map!!(map은 오래된 array를 가져다가 각 element, item을 변형시키는 것이었다. 그리고 변형돼서 return 된 것을 포함해 새로운 array에 넣어준 우리는 원하는 걸 얻을 수가 있다.)

 

(보통 map 을 쓰게 되면 배열로 부터 전달받을 각각의 item 에 대해 자유롭게 인자명을 정해줄 수 있는데 state 에서 movies 라고 선언했으면 단수형으로 movie 로 주는 것이 일반적이다.)

 

또한 ReactJS 에서 map을 사용해 return 할 때 key를 주어야 한다.

 

 

여기서 우리가 한 건 api 로 부터 받아온 data를 state에 주고 그걸 보여준게 전부다.

 

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

  useEffect(() => {
    getMovies();
  }, []);
  console.log(movies);
  return (
    <div>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <div>
          {movies.map((movie) => (
            <div key={movie.id}>
              <img alt="" src={movie.medium_cover_image} />
              <h2>{movie.title}</h2>
              <p>{movie.summary}</p>
              <ul>
                <li>
                  {movie.genres.map((g) => (
                    <li key={g}>{g}</li>
                  ))}
                </li>
              </ul>
            </div>
          ))}
        </div>
      )}{" "}
    </div>
  );
}

export default App;

 

API로 부터 받아온 정보들을 필요한 것만 취해 화면에 보여주었다.

이중에서 genres는 또 배열이기 때문에 map 을 써주어야 했고, 동시에 고유한 키 값을 줘야 하기에 genres를 넣어줬다.(그렇게 되서 겹치는 경우는 없는 건가?)