[ReactJS] Practice Movie App - ReactJS 로 영화 웹 서비스 만들기 (9)

 

드디어 본격적인 Movie App 만들기 시간!!

 

 

---

 

 

#7.3-7.4 Practice Movie App

 

영화 정보들을 나열하기 부터 시작!

 

영화 정보는 

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

api 를 이용

=> 평점 8.5 이상 & 년도 순으로 정렬 의 조건을 가짐

 

 

loading, movies 생성

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

 

loading : 데이터 fetch 여부에 따라 변경

movies : 영화 정보 리스트

 

 

useEffect 와 getMovies

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

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

 

useEffect 로 처음 딱 한 번만 데이터 fetch

 

getMovies : 데이터 fetch 후 가져온 값을 setMovies 로 저장

- 데이터를 가져왔으므로 setLoading(false)

 

 

then 과 async-await

then 방식

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

 

fetch( ).then(~).then(~)... 으로 진행

 

단점

- 오류 발생 시, 어떤 then 에서 발생한 건지 확인하기 어려움

- 가독성 저하

 

 

async-await 방식

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

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

 

async-await : 비동기 처리를 동기적으로 작동할 수 있게 도와줌

- try/catch 로 예외 처리 가능

 

async : function 앞에 위치, Promise 반환

 

await : 비동기 처리된 프로미스 앞에 위치, 비동기 처리가 될 때까지 기다렸다가 반환

- 여기서는 fetch 될 때까지 기다림 (1), response 를 json 으로 파싱할 때까지 기다림 (2) 에 사용

 

더 보기에 좋고 이해하기 쉽다.

 

 

참고) await 중첩

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

 

도 가능하다.

 

 

화면에 그려지는 부분

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

 

loading === true > Loading... 출력

 

loading === false > movies 정보를 하나씩 출력

- image, title, summary, genres 출력

 

* 모든 img 는 alt 를 갖는다.

 

 

전체 코드

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=8.5&sort_by=year"
    );
    const json = await response.json();
    setMovies(json.data.movies);
    setLoading(false);
  }

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

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

export default App;

 

 

---

 

 

다음 시간에는 Router 를 이용해서 페이지 전환이 가능하도록 할 것이다.