React JS - Movie App project (part 1)

React JS Movie App (part 1)

 

 

step1. API fetch 하고 / loading창 만들기 

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`
    )
      .then(response => response.json())
      .then(json => console.log(json));
  }, []);
  return <div>{loading ? <h1>loading...</h1> : null}</div>;
}

export default App;

 

 

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

 

 

console.log(json)을 해본 결과, 객체 형태로 json이 나온다.

 

여기서 우리가 필요한 것은

json.data.movies이다. (20개가 있는 배열)

 

 

 

 

step2. API fetch해서 json을 받아와 movies 배열 생성

 

- useState로 movies라는 state를 다룸.

- useLoading(false)로 로딩도 끝냄.

 

import { useEffect, useState } from "react";

function App() {
  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);
      });
  }, []);
  return <div>{loading ? <h1>loading...</h1> : null}</div>;
}

export default App;

 

우리는 여태 fetch().then().then()과 같이 했었는데,

then 메소드 말고 async-await를 주로 사용한다.

 

📌 async-await

1 / 우선, getMovies라는 함수를 만듬 - async()로 만듬.

 

2 / fetch와 then으로 했던 각 코드를 {const 변수명}  으로 선언하여 이어가듯이 진행.

단, await keyword를 앞에 붙여줘야함

 

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

🔻 (json = response.json 축약 ver)

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

 

 

 

이전 코드와 비교 🔻 (then 사용시)

import { useEffect, useState } from "react";

function App() {
  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);
      });
  }, []);
  return <div>{loading ? <h1>loading...</h1> : null}</div>;
}

export default App;

 

console.log(movies)

 

 

console창 변화

- 맨처음 [] : api 패치 전. movies의 디폴트값이 빈 배열 [] 이므로

- 왜 list가 두번 뜨는지?

1. 맨처음 >> setMovies(json.data.movies) 할때

2. 두번째 >> setLoading(false) 할때 (재실행되므로)

 

 

 

 

이제, 아까 삼항연산자의 null부분에 movies.map을 통해

각각의 요소들을 나타내보자.

 

{loading ? <h1>loading...</h1> : movies.map(movie => console.log(movie))}

 

각 요소를 살펴보면

 

 

return (
    <div>
      {loading ? (
        <h1>loading...</h1>
      ) : (
        <div>
          {movies.map(movie => (
            <div key={movie.id}>{movie.title}</div>
          ))}
        </div>
      )}
    </div>
  );

 

 

title이 잘 나옴

 

그 외에도 summary, image, rating등의 다양한 정보들이 있음.

 

 

우선 title, summary, genres를 가져와보자.

>> genres는 배열 형태이므로 여기에도 map()을 이용해서 각 항목을 li로 구현해보자.

 

 

 

return (
    <div>
      {loading ? (
        <h1>loading...</h1>
      ) : (
        <div>
          {movies.map(movie => (
            <div key={movie.id}>
              <h2>{movie.title}</h2>
              <p>{movie.summary}</p>
              <ul>
                {movie.genres.map(genre => (
                  <li key="genre">{genre}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      )}
    </div>
  );

❗❗ 주의 - map을 할때마다 반드시 key를 지정해줘야한다.

 

 

 

 

 

 

 

+) cover image 추가

<img src={movie.medium_cover_image} />

 

 

 

지금까지의 코드 🔻

 

App.js

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(genre => (
                  <li key={genre}>{genre}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default App;

 

---

Ref. 

Free Lecture

 

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders