/public
폴더에 public 파일들을 넣으면 된다.<img src="/vercel.svg">
와 같이 작성하면 끝이다...
등 경로를 따라 파일을 탐색할 필요가 없다.fetch
하려면 API key
가 필요하다.API key
를 어떻게 숨길지 중요하다.// /pages/index.js
...(생략)
const API_KEY = "b9a221486250d0601edc38**********";
...(생략)
// /pages/index.js
...(생략)
const API_KEY = "b9a221486250d0601edc38**********";
export default function Home() {
const [movies, setMovies] = useState([]);
...(생략)
}
useEffect()
훅을 사용해 데이터를 fetch
해옵니다.// /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) => (
...(생략)
}
{!movies && <h4>Loading...</h4>}
: movies
state 에 값이 없으면 &&(AND 연산자)
뒤의 태그를 렌더링 합니다.{movies?.map ...(생략)}
: ?
를 사용함으로써 movies
state 에 값이 없으면 map
이 실행되지 않습니다.next.config.js
파일을 활용하여 API key 숨기는 것도 다음 글에 작성하겠습니다.노마드코더 NextJS 시작하기
The Movie DB API