React (11) - API #1 await

console.log(json) 결과화면

 

console.log(json) 확인 후 추출할 데이터 위치를 확인한다. json.data.movies

 

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

 

위 코드를 다음과 같이 많이 씀 await

 

  const getMovies = async () => {
    const json = await (await fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year")
    ).json();
    setMoives(json.data.movies);
    setLoading(false);
  };
  
  useEffect(() => {
    getMovies();
  }, [])

---

 <div>
            {movies.map((movie) => (
              <div key={movie.id}>
                <img src={movie.medium_cover_image} />
                <h1>{movie.title} </h1>
                <p>{movie.summary}</p>
                <ul> {movie.genres.map((g) => <li key={g}>{g}</li>)}</ul>
              </div>
            ))}
</div>

map 사용시 key값 필수로 들어가야한다!

import { useEffect, useState } from "react";

function App() {

  const [loading, setLoading] = useState(true);
  const [movies, setMoives] = 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();
    setMoives(json.data.movies);
    setLoading(false);
  };
  
  useEffect(() => {
    getMovies();
  }, [])

  return (
    <div>
      {loading ? <h1>Loading...</h1> :
        (
          <div>
            {movies.map((movie) => (
              <div key={movie.id}>
                <img src={movie.medium_cover_image} />
                <h1>{movie.title} </h1>
                <p>{movie.summary}</p>
                <ul> {movie.genres.map((g) => <li key={g}>{g}</li>)}</ul>
              </div>
            ))}
          </div>
        )
      }
    </div>
  );
}
export default App;