Movie App (part.1)

movie api 가져오기

• fecth 함수로 api 링크 넣기
  
• 첫 번째 then으로 json() 인코딩?? 하고
• 두 번째 then으로 해당 내용 콘솔에 찍기
  
• 이런 식으로 object 결과 나옴
• 여기서 우리가 필요한건 data의 movies array니까 console.log(json) 대신 setMovies(json.data.movies) 로 movies state(array) 변경

🖥️ 코드

const [loading, setLoading] = useState(true);
const [movies, setMovies] = useState([]);
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);
    });
}, []);

---

⚠️⚠️⚠️ then 사용 많이 안함,,

➡️ 그래서 사용하는 것 : async-await

🖥️ 코드

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();
}, []);

---

⚠️ 우리가 한 것

• state로부터 받은 data 보여주기
• state는 그 data를 API로부터 받아옴

🖥️ 코드

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 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;