NextJS 시작 #9 | Fetching Data

HyeonWooGa·2022년 8월 6일

nextjs

NextJS Intro

목록 보기

10/16

NextJS 는 public 파일들을 아주 쉽게 다룰 수 있다.

/public 폴더에 public 파일들을 넣으면 된다.
원하는 컴포넌트, 페이지에서 <img src="/vercel.svg"> 와 같이 작성하면 끝이다.
- .. 등 경로를 따라 파일을 탐색할 필요가 없다.

NextJS 를 이용 API key 숨길 수 있다.

fetch 하려면 API key 가 필요하다.
- 따라서 API key 를 어떻게 숨길지 중요하다.
먼저 일반적으로 fetch 한 후에 API key 숨기는 것을 학습합니다.

The Movie DB

영화 관련 API 를 무료로 제공해주는 사이트
회원가입 후 API Key 발급 받은 후 사용가능

Fetch

우선 발급 받은 API 키를 임의의 파일 내에 저장해둡니다.

// /pages/index.js

...(생략)
const API_KEY = "b9a221486250d0601edc38**********";
...(생략)

쓰고자 하는 컴포넌트에 초기값으로 빈배열을 준 State 를 생성합니다.

// /pages/index.js

...(생략)
const API_KEY = "b9a221486250d0601edc38**********";

export default function Home() {
  const [movies, setMovies] = useState([]);
  ...(생략)
}

useEffect() 훅을 사용해 데이터를 fetch 해옵니다.
- API 를 제공하는 TMDB 의 API 문서를 참고합니다.

// /pages/index.js

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

const API_KEY = "b9a221486250d0601edc38**********";

export default function Home() {
  const [movies, setMovies] = useState([]);
  useEffect(() => {
    (async () => {
      const { results } = await (
        await fetch(
          `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
        )
      ).json();
      // console.log(data);
      console.log(results);
    })();
  }, []);

fetch 해온 객체 배열을 movies state에 담아둡니다.

// /pages/index.js

	  ...(생략)
      console.log(results);
      setMovies(results);
    })();
  }, []);
  
  ...(생략)

이제 movies state 를 이용하며 화면에 렌더링 합니다.

// /pages/index.js

...(생략)

export default function Home() {
  ...(생략)

  return (
    <>
      <Seo title="Home" />
      {movies.map((movie) => (
        <div key={movie.id}>
          <h4>{movie.title}</h4>
        </div>
      ))}
    </>
  );
}

로딩 화면

데이터가 fetch 되어 movies state 에 저장될 때까지 렌더링될 화면을 만듭니다.
movies state 의 초기값을 없앱니다.
코드를 아래와 같이 수정합니다.

// /pages/index.js

...(생략)

export default function Home() {
  	   ...(생략)
      {!movies && <h4>Loading...</h4>}
      {movies?.map((movie) => (
        ...(생략)
}