네비게이팅

네비게이팅은 Next.js 앱의 페이지 이동을 의미합니다.

먼저 Next.js는 React의 장점이었던 클라이언트 사이드 렌더링 방식의 빠르고 쾌적한 페이지 이동을 그대로 계승의 초점을 맞춰서

어떻게 하면 Next.js에서 클라이언트 사이드 렌더링 방식을 사용하면서 페이지를 이동시킬 수 있는 지 살펴보고자 합니다.

pages/_app.tsx에서

페이지를 전송할 때
보통 HTML로 코드를 작성할 때는?
a 태그를 통해서 페이지를 이동시키는게 아닌 일반적인 방식으로 서버에게 새로운 페이지를 매번 다시 요청하는 방식으로 비교적 느린 방식이 적용 됩니다.

Link 컴포넌트

Next.js는 HTML과 달리 자체적인 내장 컴포넌트인 링크 컴포넌트를 이용하는 것이 좋습니다.

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import Link from "next/link";

export default function App({ Component, pageProps }: AppProps) {
  return(
    <>
    <header>
      <Link href=''></Link>
    </header>
    <Component {...pageProps} /> 
    </>
  )
}

Link 태그는 기본적인 link 태그와 흡사합니다.
gref 속성으로 이동시키고자 하는 페이지의 경로를 명시해주고 text까지 작성해주면 됩니다.

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import Link from "next/link";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <header>
        <Link href={"/"}>index</Link>
      </header>
      <Component {...pageProps} />
    </>
  );
}

다른 페이지로 이동하는 링크로 만들어보면

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import Link from "next/link";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <header>
        <Link href={"/"}>index</Link>
        &nbsp;
        <Link href={"/search"}>search</Link>
        &nbsp;
        <Link href={"/book/1"}>book/1</Link>
      </header>
      <Component {...pageProps} />
    </>
  );
}

  는 참고로 띄어쓰기 표현입니다.

페이지 네비게이터가 잘 설정되는 것을 확인 할 수 있습니다.

페이지를 이동시킬 때 마다 페이지 렌더링 방식으로 페이지를 이동시키기 때문에 아주 쾌적하고 빠르게 페이지 이동이 제공됩니다.

프로그래매틱한 페이지 이동 (Programmatic Navigation)

함수가 실행이 되거나, 이벤트가 발생했을 때에도 페이지를 이동시킬 수 있는 프로그래매틱한 페이지 이동에 대해서 살펴보겠습니다.

사용자가 직접 링크를 클릭했을 때 이동시키는 방식이 아니라
특정 버튼이 클릭이 되었거나, 특정 조건이 만족했을 경우에 함수 내부에서 페이지를 이동시키는 방법을 말하는 것입니다.

그렇기에 구현을 하기 위해서 button을 만든 다음에 이벤트핸들러를 장착시켜 페이지를 이동시키는 기능을 구현할 수 있습니다.
먼저 버튼과 이벤트핸들러 함수를 만들어 줍니다.

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import Link from "next/link";

export default function App({ Component, pageProps }: AppProps) {
  const onClickButton = () => {};
  return (
    <>
      <header>
        <Link href={"/"}>index</Link>
        &nbsp;
        <Link href={"/search"}>search</Link>
        &nbsp;
        <Link href={"/book/1"}>book/1</Link>
        <div>
          <button onClick={onClickButton}>/test 페이지로 이동</button>
        </div>
      </header>
      <Component {...pageProps} />
    </>
  );
}

이제 이벤트 핸들러 onClickButton안에 클라이언트 사이드 렌더링 방식으로 페이지를 이동시킬 수 있는 로직을 만들어주면 됩니다.

먼저 useRouter 불러와줍니다.
그 이유는 앞 포스트에서 살펴봤던 useRouter의 push 기능을 사용하기 위해서 입니다.

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import Link from "next/link";
import { useRouter } from "next/router";

export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter();

  const onClickButton = () => {
    router.push("/test");
  };
  return (
    <>
      <header>
        <Link href={"/"}>index</Link>
        &nbsp;
        <Link href={"/search"}>search</Link>
        &nbsp;
        <Link href={"/book/1"}>book/1</Link>
        <div>
          <button onClick={onClickButton}>/test 페이지로 이동</button>
        </div>
      </header>
      <Component {...pageProps} />
    </>
  );
}

이렇게 완성이 되면 결과적으로 버튼을 클릭하게 되면 onClick 함수가 실행이 되고 router 객체의 push 메서드가 실행이 됩니다.
poush 메서드는 인수로 전달받은 경로로 페이지를 클라이언트 사이드 렌더링 방식으로 이동시켜 줍니다.