async await로 fetch하여 데이터 받아오기

// NavBar.js

import Link from "next/link";
import { useRouter } from "next/router";

export default function NavBar() {
  const router = useRouter();

  return(
    <nav>
      {/* warning 라인은 next에서 제공하는 img를 사용하라는 것 */}
      <img src="/vercel.svg" />
      <div>
        <Link href='/'>
          <a className={router.pathname==='/' ? 'active' : ''}>Home</a>
        </Link>
        <Link href='/about'>
          <a className={router.pathname==='/about' ? 'active' : ''}>About</a>
        </Link>
      </div>
    </nav>
  )
}

// index.js

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

const API_KEY = '10923b261ba94d897ac6b81148314a3f';

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

  useEffect(() => {
    // 즉시 사용 함수
    (async () => {
      // 처음에 data로 console 찍어보고 results 확인 후 비구조 할당
      const {results} = await (await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`)).json();

      setMovies(results);
    })();
  }, []);

  return (
    <div>
      {/* Seo 컴포넌트 적용 */}
      <Seo title='Home' />
      {/* movies가 없으면 로딩 */}
      {!movies && <h4>Loading...</h4>}
      {/* ?를 넣어 movies가 없으면 map이 작동 안 함(오류 방지) */}
      {/* return 줄 길어지면 () 잊지않기 */}
      {/* map에서 태그는 그대로 사용 */}
      {movies?.map(movie => (
        <div key={movie.id}>
          <h4>{movie.original_title}</h4>
        </div>))
      }
      

    </div>
  )
}

• 즉시 실행 함수

  • async부터 감싸고 끝나자마자 실행
  • res안에 results가 있어서 비구조할당

globals.css에서 body를 휴대폰 화면처럼 만들기

// globals.css

body {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}
// 추가