2.3. 내비게이팅

1. Link 컴포넌트

• 보통 페이지 이동을 위해서는 a 태그를 사용했었습니다.
• a 태그는 CSR이 아닌, 매번 서버에 페이지를 요청하는 방식으로 페이지를 렌더링합니다.
• 우리가 원하지 않는 느린 방식이기 때문에 이 넥스트 앱에서는 Link 컴포넌트를 사용하도록 합니다.
• Link는 CSR 방식으로 페이지를 이동시키는 넥스트의 내장 컴포넌트입니다.
• Link 컴포넌트는 기본적으로 a 태그와 사용법이 같기 때문에 동일한 속성을 사용합니다.

import Link from "next/link";

<header>
  <Link href={"/"}>index</Link>&nbsp;
  <Link href={"/search"}>search</Link>&nbsp;
  <Link href={"/book/1"}>book/1</Link>
</header>

2. Programmatic Navigation

• 링크 컴포넌트를 사용하는 것이 아니라, 함수가 실행되거나 이벤트가 발생했을 때 페이지를 이동시킬 수 있는 방법입니다.
• 버튼을 클릭했을 때 이벤트핸들러 함수 내에서 페이지 이동을 구현하는 방법에 대해 알아봅니다.
• 라우터의 push 메서드에 원하는 페이지를 인자로 전달하면 CSR 방식으로 페이지를 렌더링합니다.

import { useRouter } from "next/router";

const router = useRouter();
const onClickButton = () => {
  router.push("/test");
};

<div>
  <button onClick={onClickButton}>/test 페이지로 이동</button>
</div>

라우터에는 push외에도 다양한 페이지 이동 메서드가 존재합니다:

• replace: 뒤로가기를 방지하며 페이지를 이동시킵니다.
• back: 뒤로 가기