#7.3 Movie App part One

 

https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year 

 

이 영화 api 정보들을 가지고 만들어본다

 

then 보다 자주 사용하는 최신 async-await

 useEffect(() => {
    fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year")
      .then((response) => response.json())
      .then(json => {
        setMovies(json.data.movies)
        setLoading(false);
      });
  }, []);

 

아래와 같이 변경할 수 있다

흠... 외워야 하나 

  const getMovies = async () => {
    const response = await fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year");
    const json = await response.json();
    setMovies(json.data.movies);
    setLoading(false);
  }

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

 

 

---

 

한 번 더 시간 버린 () 문제 

=> 이후에 {} 아닌 () 쓰거나 그냥 비워두기

<div>
          {movies.map((movie) =>
            <div key={movie.id}>
              <h1>{movie.title}</h1>
              <p>{movie.summary}</p>
            </div>)}
        </div>

 

map 사용할 때 key 값 주는 것 잊지 말기!

 

map()으로 값을 가져오는 경우 img 이미지를 넣을 때 src에 "" 가 필요없다! 

<img src={movie.medium_cover_image} />

 

다음 시간에는 영화 제목을 클릭하면 상세 화면으로 나가는 부분을 진행하겠다

 

전체 코드

import { useState, useEffect } from 'react';

function App() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);

  const getMovies = async () => {
    const response = await fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9.6&sort_by=year");
    const json = await response.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}>
              <h1>{movie.title}</h1>
              <p>{movie.summary}</p>
              <img src={movie.medium_cover_image} />
              <ul>
                {movie.genres.map((genre) => <li key={genre}>{genre}</li>)}
              </ul>
            </div>)}
        </div>
      }
    </div >
  );
}

export default App;