NEXTJS 영화 API로 DATA 가져오기

영화 DATA를 가져온 사이트 (TMDB)

노마드 코더 next.js 강의를 들으며 알게된 사이트인데 기본적으로 API 구성이 잘 되어있어서 내가 원하는 데이터를 어렵지 않게 받아올 수 있는 것 같다. 나는 이곳에서 영화 데이터를 받아오기 위해 API 키 발급 신청을 했고, 신청 후 즉시 API 키가 발급된 것을 알 수 있었다. 지금부터는 받아온 API KEY를 이용해 NEXTJS 프로젝트에 data를 심어줘볼 것이다.

리액트앱과 다른 것?

사실상 데이터를 받아와서 화면에 그려주는 것은 리액트에서와 다를 것이 없었던 것 같다. 똑같이 화면이 렌더링될 때 내가 받아오고자하는 데이터를 요청하면 되는 것이었는데 이번에 처음으로 fetch함수를 이용해봤다.

먼저, 발급한 API KEY를 변수로 선언해주고 가져온 데이터를 담을 state를 만들어주었다. 그 후에 useEffect를 이용하여 요청을 보냈는데 데이터를 요청하니 console에 원하는 정보가 찍히는 것을 볼 수 있었다. 콘솔에 데이터가 제대로 들어오는지 확인한 후 setState를 이용해 state의 상태를 바꿔주었는데, 그렇게 movie정보를 movie라는 state에 담을 수 있었다.

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

const API_KEY = "여기에 발급한 api키 입력";

export default function Home() {
  const [movies, setMovies] = useState([])

  useEffect(() => {
    (async () => {
      const data = await (await fetch(
        `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
      )).json();
        setMovies(data.results)
    })();

  }, [])
  return (
    <div>
      <Seo title='HOME' />
      {!movies && <h4>Loading...</h4>}
      {movies?.map(movie => <div key={movie.id}>
        <h4>{movie.original_title}</h4>
      </div>)}
    </div>
  );
}

그 후, state에 담긴 배열의 리스트를 map함수를 이용해 화면에 그려줬는데 내가 그리고자 했던 정보는 영화의 제목이었다. 그래서 영화 제목을 꺼내와 map을 돌려 화면에 그려주는 것까지 처리했다.

여기까지 작업한 것을 봤을 때는 리액트에서 하던 방식과 크게 다를 것이 없었고, 크게 어려운 것도 없었다. 기존에 axios를 이용해 비동기요청을 처리하던 방식을 fetch함수로 적용했다는 것만 달랐을뿐이다.

fetch 함수

fetch함수는 서버에 비동기 요청을 할 수 있도록 만들어주는 함수인데 자바스크립트의 내장 라이브러리이다. 즉, HTTP 요청 전송 기능을 제공하는 Web API라고 할 수 있는데 fetch() 함수를 이용하거나 기존에 사용했던 axios 라이브러리를 사용해 비동기 요청을 처리할 수 있다.

//
fetch('api주소')
  .then( res => res.json())
  .then( res => {
    // data를 응답받은 후의 로직
  );

// error 캐치
fetch('api 주소')
  .then(res => {
    console.log(res)
  })
  .catch(error => {
    console.log(error)
  })