[스터디 with 실전 리액트 프로그래밍] 18편 - Next.js

실전 리액트 프로그래밍

 

8장은 리액트 기반 프레임워크 Next.js를 다룬다.

next의 가장 큰 특징은 서버사이드 렌더링(SSR)을 지원하는 것이다.

서버사이드 렌더링(SSR)이나 클라이언트사이드 렌더링(CSR)을 모른다면 아래의 유튜브를 추천한다.

드림코딩 - SSR

 

 

 

 

Next.js

 

next.js를 시작해보자.

우선 next와 react를 설치한다.

$ npm init -y
$ npm install next react react-dom

 

 

next.js는 프레임워크이고, 프레임워크는 저마다의 규칙이 있다.

next.js에서는 모든 페이지 컴포넌트가 pages 폴더 밑에 있어야 한다.

pages 폴더를 만들고, page1.js 파일을 만든다.

 

// ./pages/page1.js

export default function Page1() {
  return (
    <div>
      <p>This is page1</p>
    </div>
  );
}

파일 상단에서 리액트 모듈을 import하지 않았다.

next는 리액트 모듈을 자동으로 포함시켜주기 때문이다.

 

$ npx next

next.js를 이용한 SSR

next를 실행하고 /page1에 접속하니 SSR이 자동으로 되어있는 것을 확인할 수 있다.

 

 

 

 

getInitialProps

 

next.js에서 페이지 컴포넌트로 props를 전달하기 위해선 getInitialProps 함수를 이용한다.

getInitialProps 함수는 페이지 진입 직전에 호출된다.

유저가 첫 페이지를 요청하면 해당 함수는 서버에서 호출되고, 이후 클라이언트에서 페이지 전환을 하면 클라이언트에서 호출된다.

 

// ./pages/page2.js

Page2.getInitialProps = ({ query }) => {
  const text = query.text || "none";
  return { text };
};

export default function Page2({ text }) {
  return (
    <div>
      <p>This is page2.</p>
      <p>{`text is ${text}`}</p>
    </div>
  );
}

getInitalProps 사용

서버에서 생성된 데이터가 페이지 렌더링에 잘 반영된 것을 확인했다.

 

 

 

 

Link & Router

 

next.js에는 페이지 이동을 위해 Link 컴포넌트와 Router 객체를 제공한다.

 

// ./pages/page1.js
// Link 이용

import Link from "next/link";

export default function Page1() {
  return (
    <div>
      <p>This is page1.</p>
      <Link href="/page2">
        <a>page2로 이동</a>
      </Link>
    </div>
  );
}


// ./pages/page2.js
// Router 이용

import Router from "next/router";

Page2.getInitialProps = ({ query }) => {
  const text = query.text || "none";
  return { text };
};

export default function Page2({ text }) {
  return (
    <div>
      <p>This is page2.</p>
      <p>{`text is ${text}`}</p>
      <butoon onClick={() => Router.push("/page1")}>page1으로 이동</butoon>
    </div>
  );
}

Link와 Router로 페이지 이동

page1 컴포넌트에서는 Link를 이용했고, page2에 Router를 이용했다.

 

 

 

 

error page

 

만약 정의하지 않은 페이지로 접속한다면 next.js에서 기본으로 제공한 에러 페이지가 렌더링된다.

next에서 기본으로 제공하는 error page

 

error page를 직접 구현하고 싶다면 pages 폴더 안에 _error.js 파일을 작성하면된다.

이 떄 getInitialProps 함수를 이용하면 에러 코드를 props로 전달하여, 상황에 맞는 에러 페이지를 렌더링할 수 있다.

 

 

 

 

SSR은 서버에서 렌더링 작업을 하기 때문에 서버의 CPU 연산을 최소화하는 것이 중요하다.

이 때 렌더링 결과를 캐싱하거나 빌드 시 미리 렌더링하는 방법이 많이 사용된다.

 

 

 

 

코드

 

GitHub - junhee-won/react-study: with 실전 리액트 프로그래밍