[Next.js] 페이지 간 이동하기

• 이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다.
• 오역 및 오탈자 발견시 댓글로 제보해주시면 감사하겠습니다.

이제 간단하게 Next.js 앱을 생성하고 실행하는 법은 알 것입니다. 이 앱은 오직 하나의 페이지를 가졌지만, 우리는 가능한 많은 페이지를 추가할 수 있습니다. 예를 들어, pages/about.js에 다음과 같은 내용을 추가하여 "About" 페이지를 생성할 수 있습니다.

export default function About(){
    return(
          <div>
              <p>This is the about page</p>
          </div>
    );
}

이제 http://localhost:3000/about 페이지에 접근할 수 있을 것입니다.

다음으로는 이 페이지들을 연결해야하는데, 우리는 HTML의 <a /> 태그를 사용해왔습니다. 그러나 클라이언트 사이드에서의 이동을 실행하지 않고, 대신 브라우저가 다음 페이지에 대한 서버에 요청을 보내고 우리가 원하지 않은 페이지를 새로고침합니다.

클라이언트 사이드에서의 이동을 지원하기 위해서, Next.js의 next/link를 통해 내보내진, Link 컴포넌트를 이용해야합니다. Link 컴포넌트를 사용하면, 페이지 이동이 페이지의 새로고침 없이 발생할 수 있습니다.

셋업

다음 수업을 따라오기위해 간단한 Next.js 앱이 있어야합니다. 이전 수업의 작업으로 계속하거나 다음 예시 앱을 다운로드합니다.

git clone https://github.com/zeit/next-learn-demo.git
cd next-learn-demo
cd 1-navigate-between-pages

다음 명령어로 실행가능합니다.

npm install
npm run dev

이제 http://localhost:3000에 들어가서 앱에 접근할 수 있습니다.

Link 사용하기

우리가 만든 두 페이지를 연결하기위해 next/link를 이용할 것입니다.

다음 코드를 pages/index.js에 추가합니다.

import Link from 'next/link';

const Index = () => (
  <div>
    <Link href="/about">
      <a>About Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

next/link를 Link로 불러와서 이와 같이 사용합니다.

<Link href="/about">
  <a>About Page</a>
</Link>

이제 http://localhost:3000/를 방문해봅시다.

이제 "About Page"링크를 클릭해면, "About" 페이지로 이동하게 됩니다.

이것은 클라이언트 사이드에서의 페이지 이동입니다; 일련의 작업들이 서버요청 없이 브라우저에서 실행됩니다. 브라우저의 네트워크 요청 조사를 열어보면 이를 확인할 수 있습니다.

간단한 작업을 하나 해볼까요?

• http://localhost:3000/에 방문합니다.
• "About Page"를 클릭합니다.
• 브라우저의 뒤로가기 버튼을 누릅니다.

어떤 결과를 확인할 수 있나요?
A. (X) 뒤로가기 버튼이 작동하지 않는다.
B. (X) 뒤로가기가 브라우저 콘솔에서 에러를 던진다.
C. (V) 클라이언트 사이드에서 인덱스(홈) 페이지로 이동합니다.
D. (X) "import 'next/back' to support back button"라는 경고창이 뜹니다.

클라이언트 사이드 히스토리 지원

뒤로가기 버튼을 누를 때, 클라이언트를 통해 페이지 전체가 인덱스 페이지로 이동합니다. next/link는 모든 location.history 조작을 대신 해줍니다.

클라이언트 사이드에서 단 한 줄의 라우팅 코드도 작성할 필요가 없습니다.

간단하게 페이지를 연결시켜서 원하는대로 작동하게 됩니다!

Link에 Props 추가하기

여러가지 이유로 여러분의 링크에 attribute나 props를 추가하고 싶을 수 있습니다. 아마 title attribute를 링크에 추가하고 싶을 겁니다. 다음과 같이 말이죠:

<Link href="/about">
  <a title="About Page">About Page</a>
</Link>

이렇게 추가하면, title attribute로 "About Page"가 추가되어 렌더링된 엥커 태그를 확인할 수 있습니다.

이런 식으로 하는 건 어떨까요?

<Link href="/about" title="About Page">
  <a>About Page</a>
</Link>

위와 같이 코드를 수정하면 어떻게 될까요?
A. title attribute가 엥커 태그에 예상했던 바와 같이 정확하게 적용됩니다.
B. 적용되지 않고 콘솔에 에러가 뜹니다.
C. 풀 페이지 리로딩 이후, title가 링크에 적용됩니다.
D. title에 적용되지만, 콘솔에 경고가 뜹니다.

Link는 그저 Wrapper 컴포넌트입니다.

사실 Link 컴포넌트의 title prop은 아무 영향도 주지 않습니다. Link가 그저 href와 비슷한 props만을 받을 수 있는 Wrapper 컴포넌트이기 때문입니다. 만약 props를 추가하고 싶다면, child에 추가해야합니다. 이 경우에 Link 컴포넌트의 child는 엥커 태그입니다.

Link는 간단하지만, 강력합니다.

여기서는 next/link의 매우 간단한 사용법만 알아봤지만, 다양한 흥미로운 사용처들이 있습니다. 이것들에 대해 이후의 수업에서 배우게 될 것입니다.

그 동안, Next.js 라우팅 문서에서 얼마나 유용한 지 확인해보세요.