[영화 웹 서비스 만들기] #11. Movie App

~7.4까지의 강의

 

이제 메인 프로젝트인 영화 웹 서비스를 만든다.

근데 앞에서 설명했던 거랑 비슷한 게 많아서 헷갈렸던 개념을 한 번 더 정리한다고 생각해야겠다.

 

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

영화를 받을 수 있는 api를 가지고 온 후 fetch를 한다.

이 때 링크 뒤를 보자. minimum_rating이 8.8이고, year순으로 정렬!

앞선 강의와 다른 점은, async 함수를 사용해 then이 없다는 것이다.

 

fetch?

fetch(url, [options])

url-접근하고자 하는 URL

options - 선택 매개변수, mehtod나 header 등을 지정할 수 있다.

 

then

자바스크립트에서 함수는 동기함수, 비동기 함수로 나뉜다. API를 호출할 때, 사용하는 fetch 함수는 대표적인 비동기함수이다. 그렇기 때문에 API호출하는 과정이 끝나지 않더라도 자동적으로 다음 코드로 넘어간다. 하지만 API로부터 받아온 정보를 사용할 필요가 있는 경우에 .then 함수를 쓰는 것이다.

https://velog.io/@daybreak/React-Fetch%ED%95%A8%EC%88%98

 

async

비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있다.

https://velog.io/@limes/React-Async-await

 

 

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

map의 첫번째 argument는 내 마음대로, 원하는 대로 명령가능하다.

 

전체 코드

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=8.8&sort_by=year`
      )
    ).json();
    setMovies(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} />
              <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;

이런식으로 쫙 나옴

 

 

---

component를 사용해보자.

 

모든 App component가 Home component로 옮겨온다.

 

Home.js

import { useEffect, useState } from "react";
import Movie from "../components/Movie";

function Home() {
  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=8.8&sort_by=year`
      )
    ).json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);
  return (
    <div>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <div>
          {movies.map((movie) => (
            <Movie
              key={movie.id}
              coverImg={movie.medium_cover_image}
              title={movie.title}
              summary={movie.summary}
              genres={movie.genres}
            />
          ))}
        </div>
      )}
    </div>
  );
}
export default Home;

Movie에 여러가지 값들을 전달해주는 것 확인!

 

Movie.js

import PropTypes from "prop-types";

function Movie({ coverImg, title, summary, genres }) {
  return (
    <div>
      <img src={coverImg} alt={title} />
      <h2>{title}</h2>
      <p>{summary}</p>
      <ul>
        {genres.map((g) => (
          <li key={g}>{g}</li>
        ))}
      </ul>
    </div>
  );
}

Movie.propTypes = {
  coverImg: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
};

export default Movie;

이 때, coverImg, title 등이 Home.js로부터 받을 것이라서 props object에 넣어준다.

 

React Router

react router는 페이지를 전환하는 것이다. 

npm install react-router-dom

우리의 코드를 바꾸거나 이동시켜야하는데, 스크린 단위로 생각해야하기 때문이다.

route별로 생각해야 한다.

 

우선 routers 폴더와 components 폴더를 만들어 분리시킨다.

 

src

- components

• Movie.js

- routes

• Detail.js
• Home.js

- App.js

- index.js

 

자세한 React router는 다음 강의부터!