[React] API 사용하기

Intro

React에서 영화 API 데이터를 가져와서 컴포넌트에 보여주기

---

API 에서 가져온 데이터는 JSON 형식이라, 배열 State를 사용하게 된다. 이는 이전 포스팅 설명했으니 참고하자.

[React] 배열 State

 

API 에서 데이터 받아오기

먼저, 영화 API 주소를 이용해 데이터를 가져오려고 한다.

https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year
=> 연도별로 정렬된 평점 9 이상의 영화 데이터

useEffect() 함수를 이용해 컴포넌트가 가장 처음으로 render 되었을 때 한 번만 api를 로딩하려고 한다. 두번째 인자로 빈 배열을 넣어주면 첫번째 인자에 들어있는 코드는 한 번만 작동한다는 것을 기억하자.

 fetch(
      `API주소`
    ).then((response) => response.json())

원하는 api 주소의 url을 fetch 시킨다. 그러면 request가 요청되고, 우리는 response를 받게되는데 데이터를 출력하기 위해서는 json을 추출해내야 한다. .then((response) => response.json())으로 response를 받아서 response.json을 return해준다.

그렇게 가져온 data를 컴포넌트에 보여주고 싶다면, 가져온 data를 state에 넣어야한다.
useState를 이용해서 json의 값을 setState 함수로 state 값에 넣어준다.
전체코드는 다음과 같다.

import { useState, useEffect } 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);
      });
  }, []);
  console.log(movies);
  return <div>{loading ? <h1>Loading...</h1> : null}</div>;
}
export default App;

+

async-await 사용

최근에는 보편적으로 .then 대신 async-await 사용한다. async 함수 getMovies를 만들어주고 useEffect()에서 호출해준다. 그리고 getMovies 함수 안에 api 데이터를 가져오도록 하는 것이다.

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=9&sort_by=year`
    // );
    // const json = await response.json();
    const json = await (
      await fetch(
        `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`
      )
    ).json(); // await를 await로 감싸기
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);
  console.log(movies);
  return <div>{loading ? <h1>Loading...</h1> : null}</div>;
}
export default App;

가져온 api 데이터를 보여주는 방법은 이전 포스팅의 배열 state 사용하는 법에서 설명했는데, map() 함수를 사용해주면 된다.

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

간단히 영화의 제목들만 가져와서 보여줬다.