[React] 영화 정보 불러오기

학습일 : 2023. 03. 20

---

이번에는 

저번에 타이틀을 불러온 것

2023.03.19 - [React/개념정리] - [React] async() 사용하기

에 이어

 

 

영화 메인 포스터와 시놉시스까지 불러오는 걸 해볼려고 한다.

 

 

그리고 오늘 새롭게 안 사실

1. map 으로 인해 새롭게 생성된 컴포넌트 그 안에서 또 map을 쓸 수 있다는 사실

2. map을 쓸 때 필수로 적어줘야 하는 key는 어떠한 문자든지 상관이 없다는 것 (그것이 고유한 값이라는 가정하에)

---

 

map 사용 -  뜯어 볼 코드

        <div>
          {movies.map((movie) => (
            <div key={movie.id}>
              <img src={movie.medium_cover_image}></img>
              {/* 이 컴포넌트들은 movies 배열에 있는 각 movie에서 변형되어 나온 것임. */}
              <h2>{movie.title}</h2> {/*영화제목 불러오기*/}
              <ul>
                {movie.genres.map((g) => (
                  <li key={g}>{g}</li> // map을 쓸 때에는 key를 element로 줘야함. 주지 않으면 에러
                  // 장르는 ID등 어떠한 고유값이 없음. 따라서 key를 g로 줬는데, g가 고유한 값인 한 상관 없음.
                ))}
              </ul>
              <p>{movie.summary}</p> {/*영화 줄거리 불러오기*/}
            </div> // key는 unique 여야 한다. fetch 사이트에서 보면 영화마다 고유한 id가 있기 때문에 그걸 가져다 쓸거임.
          ))}
        </div>

---

어쨌든

장르를 list 로 불러오기 위해 map을 한번 더 사용해보았고

이번에는 영화 포스터와

시놉시스까지 불러와보았다.

 

 

전체코드는 아래와 같다.

 

 

<App.js>

import { useEffect, useState } from "react";
import styles from "./App.module.css";

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를 호출
  useEffect(() => {
    getMovies();
  }, []);

  return (
    <div>
      {loading ? (
        <h3>로딩 중...</h3>
      ) : (
        <div>
          {movies.map((movie) => (
            <div key={movie.id}>
              <img src={movie.medium_cover_image}></img>
              {/* 이 컴포넌트들은 movies 배열에 있는 각 movie에서 변형되어 나온 것임. */}
              <h2>{movie.title}</h2> {/*영화제목 불러오기*/}
              <ul>
                {movie.genres.map((g) => (
                  <li key={g}>{g}</li> // map을 쓸 때에는 key를 element로 줘야함. 주지 않으면 에러
                  // 장르는 ID등 어떠한 고유값이 없음. 따라서 key를 g로 줬는데, g가 고유한 값인 한 상관 없음.
                ))}
              </ul>
              <p>{movie.summary}</p> {/*영화 줄거리 불러오기*/}
            </div> // key는 unique 여야 한다. fetch 사이트에서 보면 영화마다 고유한 id가 있기 때문에 그걸 가져다 쓸거임.
          ))}
        </div>
      )}
    </div>
  );
}

export default App;

 

 

이제 map쓰는 법을 좀 알 것 같다.

 

실행결과