Next.js 에서 데이터 가져오는 방법

@2023/10/17

안녕하세요 lika-7입니다

이번시간에는 Next.js에서 데이터를 가져오는 방법을 설명하겠습니다,.

Next.js에서 데이터를 가져오는 방법

Next.js에서 데이터를 가져오는 방법을 data fetching이라고 합니다

react.js에서 데이터를 가져오는 방법은 보통 useEffect를 통해서 데이터를 가져 옵니다.

Next.js 또한 비슷한 방법을 통해서 데이터를 가져올 수 있습니다.

react.js에서 데이터를 가져오기

React.js 에서 useEffect를 이용해 함수형 컴포넌트에서 데이터 가져오기, 구독 설정, 수동 DOM 조작을 수행하기 위한 Hook 중 하나 입니다.

//JSX

import React, { useState, useEffect } from 'react';

function MyComponent() {
  // 상태와 변수 선언

  // useEffect를 사용하여 부수 효과 처리
  useEffect(() => {
    // 여기에서 부수 효과를 수행
    // 예: 데이터 가져오기, 구독 설정, DOM 조작, 타이머 설정 등

    // 반환 함수를 사용하여 정리(clean-up) 작업 수행 (예: 타이머 해제, 구독 해제 등)
    return () => {
      // 정리 작업
    };
  }, [dependencies]);

  return (
    // 컴포넌트 내용 렌더링
  );
}

useEffect를 사용하면 컴포넌트가 렌더링되거나 상태가 변경될 때 필요한 부수 효과를 처리하고, 필요에 따라 정리 작업을 수행할 수 있습니다.

이는 데이터 가져오기, 이벤트 처리, 타이머 설정, DOM 조작 등 다양한 상황에서 유용하게 활용됩니다.

Neact.js에서 데이터를 가져오기

Neact.js에서 데이터를 가져오는 방법을 설명하겠습니다.

getStaticProps	Static Generation으로 빌드(build)할 때 데이터를 불러옵니다.(미리 만들어둠)
getStaticPaths	Static Generation으로 데이터에 기반하여 pre-render시 특정한 동적 라우팅 구현(pages/post/[id].js)
getServerSideProps	Server Side Rendering으로 요청이 있을 때 데이터를 불러옵니다.

getStaticProps

• 정적 생성된 페이지를 위한 데이터를 미리 가져오는 메서드

• 페이지가 빌드될 때만 데이터를 가져오며 런타임에는 실행되지 않습니다.

• 주로 SEO를 개선하거나 페이지 내용을 미리 랜더링 할 때 사용 합니다

export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
  };
}

function MyPage({ data }) {
  return <div>{data}</div>;
}

export default MyPage;

getStaticPaths

Next.js에서 동적 경로를 처리하기 위한 중요한 메서드로,

동적 라우팅을 구현할 때 사용됩니다.

예를 들어 [id].js 파일을 사용하여 동적 라우팅을 생성한다고 가정해보겠습니다.

[id].js 파일은 id라는 동적 파라미터를 받는 페이지 입니다.

이 파일을 통해 여러 항목을 렌더링하는경우, 각 항목에 대한 페이지를 자동으로 생성하기 위해 getStaticPaths를 사용합니다

getStaticPaths는 반드시 getStaticProps와 함께 사용됩니다.

이것은 페이지를 정적으로 생성할 때 페이지의 경로 정보를 정의합니다.

예를 들면, 영화 정보 페이지에서 [id].js 파일을 사용한다면,

getStaticPaths는 모든 영화 ID 목록을 반환 해야 합니다.

아래의 예제를 확인해봅시다.

// pages/[id].js

// 이 함수는 가능한 모든 동적 경로를 정의합니다.
export async function getStaticPaths() {
  // 예: 데이터베이스에서 모든 영화 ID 가져오기
  const movieIds = await fetchMovieIds(); 

  // paths 배열에 가능한 모든 경로를 반환
  const paths = movieIds.map((id) => ({ params: { id } }));

  return {
    paths,
    fallback: false, // 이 값이 true이면 없는 페이지로 가도 에러가 나지 않음
  };
}

// 페이지에 데이터를 제공하는 함수
export async function getStaticProps({ params }) {
  const movieData = await fetchMovieData(params.id);

  return {
    props: {
      movieData,
    },
  };
}

function MoviePage({ movieData }) {
  return (
    <div>
      <h1>{movieData.title}</h1>
      <p>{movieData.description}</p>
    </div>
  );
}

export default MoviePage;

getStaticPaths에서 paths 배열에서 가능한 모든 동적 경로를 반환합니다.

fallback 옵션은 false로 설정되어 있음으로, 사전에 생성되지 않은 경로로 접근하면 404에러가 발생합니다.

이렇게 동적 라우팅을 사용하면 모든 가능한 경로에 대한 페이지를 미리 생성할수 있어

SEO와 성능을 향상시킬 수 있습니다.

getServerSideProps

이 함수를 사용하면 페이지를 요청할 때마다 서버에서 데이터를 가져와 페이지를 렌더링할 수 있습니다.

// pages/my-page.js

export async function getServerSideProps(context) {
  // 데이터를 가져오기 위한 비동기 작업 (예: 데이터베이스 쿼리)
  const data = await fetchData();

  return {
    props: {
      data,
    },
  };
}

function MyPage({ data }) {
  // props로 전달된 데이터를 사용하여 페이지 렌더링
  return (
    <div>
      <h1>My Page</h1>
      <p>{data}</p>
    </div>
  );
}

export default MyPage;