Next.js에 대해서 알아보자 #2. Data Fetching

지난 포스팅에 이어서 Next.js 튜토리얼 글을 이어서 작성해 보고자 한다.

시작하기에 앞서 이제부터 타입스크립트를 사용할 계획이라 TS 설치를 먼저 진행한다.

$ npm i typescript @types/react @types/node --save-dev

// node_modules 폴더를 지우고
$ npm i

$ npm run build & npm run dev

그러면 프로젝트 root 디렉토리 위치에 다음 파일들이 자동으로 생성이 될 것이다.

• next-env.d.ts
• tsconfig.json

그리고 기존의 어플리케이션도 jsx 파일을 tsx로 바꾸어 주면 정상적으로 실행이 된다.

 

오늘 해볼 작업들은 다음과 같다.

• Link를 통해 페이지를 이동
• getStaticProps()를 통한 동적 데이터 추가

 

Link를 통한 페이지 이동

Next.js 프로젝트에서 라우트 처리는 Link를 통해서 쉽게 할 수 있다. 아래와 같이 /pages/index.tsx 파일을 만들면 'This is about page'를 눌렀을 때 /about 페이지로 이동하게 된다. 이 때 Link는 라우팅 관련 props만 받아들이는 래퍼 컴포넌트로 스타일을 적용하는 등의 작업을 하려면 Link 하위에 작업을 해 주어야 한다.

 

Next.js를 쓰지 않는 일반적인 리액트 프로젝트와 Next.js를 쓰는 프로젝트에서 브라우저에 화면을 그리는 방식은 다음과 같은 차이가 있다.

출처 : https://nextjs.org

출처 : https://nextjs.org

 

getStaticProps()를 통한 동적 데이터 추가

앞서 그림을 통해 본 것 처럼 일반적인 react 프로젝트에서 render 이후 API를 통해 값을 불러와서 화면을 갱신하는 것과 달리, Next.js는 빌드 시점에 API를 통해 불러올 값을 페이지에 전달하여 생성한다. 따라서 렌더링 속도 및 첫 의미있는 화면을 보여주는 속도 측면에서 이점을 가진다.

출처 : https://nextjs.org

이 때 사용하는 함수가 async 함수인 getStaticProps() 이다. Next.js는 페이지를 빌드 시점에 pre-render하고 getStaticProps의 props 속성을 통해 리턴한다.

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

getStaticProps가 리턴하는 객체에는 다음과 같은 속성들이 있다.

• props: 필수값, 페이지 컴포넌트로부터 받는 props 객체
• revalidate: 옵션값, 페이지 재생성이 일어날 수 있는 시간(초)을 표현
• notFound: 옵션값, 페이지가 404 상태를 리턴할 수 있는지 표현
• redirect: 옵션값, 내부 혹은 외부 자원으로 리다이렉트하는 경우 필요한 속성값

 

NewsAPI를 통해 뉴스 기사들을 getStaticProps에서 API로 불러와서 컴포넌트에 props로 전달해 주는 예제 코드는 다음과 같이 짜 볼 수 있다. getStaticProps 함수는 서버 사이드에서 빌드 시점에 호출이 되고 클라이언트 사이드에서 호출되는 것이 아님을 다시 한 번 명심하도록 하자.

이번 포스팅에서는 Next.js의 Data Fetching을 중심으로 튜토리얼을 진행해 보았다. 다음번에는 동적 라우팅을 통한 페이징 처리 작업을 튜토리얼로 해 보려고 한다.