[NextJs] 페이지 이동 방법

Next.Js 공부하면서 다양한 페이지 이동 방법을 이용해 코드를 작성해 봤다. 잊어버리기 전에 정리해보자.
오늘은 우선 Link컴포넌트와 useRouter 방식을 알아보자.

Link

<Link>은 HTML <a> 요소를 확장하여 prefetching과 클라이언트 측 라우트 간 탐색을 제공하는 React 컴포넌트이다.

import Link from "next/link";
import DetailLink from "./DetailLink";

  return (
    <div className="list-bg">
      {result.map((a, i) => (
        <div className="list-item" key={i}>
          <Link href={"/이동할 경로/" + result[i]._id}>
            <h4>{result[i].title}</h4>
          </Link>
          <p>1월 1일</p>
        </div>
      ))}
    </div>
  );
}

위에 코드처럼 href에 이동하고자 하는 경로를 입력하면 라우터로 이동한다.

Link 컴포넌트의 구성요소

• href : href="/이동할 경로”
• replace : replace={false} 기본값은 false 이며 브라우저 기록 에 새 URL을 추가하는 대신 현재 기록 상태를 대처한다.
• scroll : scroll={false} 기본값은 true 이며 <Link>새 경로의 맨 위로 스크롤하거나 앞뒤 탐색을 위해 스크롤 위치를 유지하는 것이다.
• prefetch : prefetch={false} 전체 경로와 해당 데이터가 미리 가져온다. (아래에서 자세히 알아보자.)

useRouter

next.js에서 제공하는 useRouter 훅을 이용하면 클라이언트 컴포넌트 내에서 사용할 수 있다. 하지만 특별한 요구사항이 없다면 Link컴포넌트를 사용하는 것이 권장된다.

'use client'

import {useRouter} from 'next/navigation'

export default function DetailLink(){
  let router = useRouter()
  return (
    <button onClick={()=>{ router.push('이동할경로') }}>버튼</button>
  )
}

위에 코드 처럼 useRouter 훅을 사용하여 라우터 객체를 얻고, 이를 통해 클라이언트 사이드에서 라우트를 변경할 수 있다. router.push 메서드 안에 ‘이동할경로’를 적어준다.

import Link from "next/link";
import DetailLink from "./DetailLink";

  return (
    <div className="list-bg">
      {result.map((a, i) => (
        <div className="list-item" key={i}>
          <Link href={"/이동할 경로/" + result[i]._id}>
            <h4>{result[i].title}</h4>
          </Link>
          <DetailLink />
          <p>1월 1일</p>
        </div>
      ))}
    </div>
  );
}

위에 코드처럼 server component에서 useRouter를 사용하고 싶으면 따로 client component(<DetailLink />)를 만들어서 server component에 import하는 방식으로 사용해야 한다.


router.push뿐만 아니라 useRouter에는 다양한 메서드를 이용해 내비게이션 작업을 수행할 수 있다. 같이 알아보자.

• router.push(href: string, { scroll: boolean }): 주어진 라우트로 클라이언트 측 네비게이션을 수행합니다. 브라우저의 히스토리 스택에 새 항목을 추가합니다.
• router.replace(href: string, { scroll: boolean }): 브라우저의 히스토리 스택에 새 항목을 추가하지 않고 주어진 라우트로 클라이언트 측 네비게이션을 수행합니다.
• router.refresh(): 현재 라우트를 새로고침합니다. 서버에 새로운 요청을 보내고 데이터 요청을 다시 가져오며 서버 컴포넌트를 다시 렌더링합니다. 클라이언트는 업데이트된 React 서버 컴포넌트 페이로드를 유지하면서 영향받지 않은 클라이언트 측 React (예: useState) 또는 브라우저 상태 (예: 스크롤 위치)를 재병합합니다.
• router.prefetch(href: string): 주어진 라우트를 미리 가져와 더 빠른 클라이언트 측 전환을 위한 작업을 수행합니다.
• router.back(): 브라우저의 히스토리 스택에서 이전 라우트로 이동합니다.
• router.forward(): 브라우저의 히스토리 스택에서 다음 페이지로 이동합니다.
  
  

---

prefetch

위에 있는 메서드 중 Link컴포넌트와 useRouter 둘 다 갖고있는 prefetch속성 기능에 대해 알아보자.

Link

<Link href={'/이동할 경로'} prefetch>링크</Link>

-------------------------------------------------------

<Link href={'/이동할 경로'} prefetch={false}>링크</Link>

• Link 컴포넌트는 기본적으로 prefetch 이 활성화 되어 있기 때문에 사용자가 실제로 그 페이지로 이동하기 전에 미리 가져오는 작업을 하고, 이렇게 하면 웹페이지 로딩과 렌더링 속도가 모두 빨라진다.
• prefetch 은 기본적으로 true로 활성화 되어 있기 때문에 기능을 사용하고 싶지 않으면 prefetch속성을 false로 바꿔줘야 한다.
  
  

useRouter

<button onClick={()=>{ router.prefetch('/이동할 경로') }}>버튼</button>

• useRouter도 prefetch 를 사용하면 미리 가져오는 작업을 해줘서 사용자가 해당 페이지로 이동할 때 더 빠르게 로딩된다.

참고

<next.js 공식문서>
https://nextjs.org/docs/app/api-reference/components/link
https://nextjs.org/docs/app/api-reference/functions/use-router
https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching
<코딩애플>
https://codingapple.com/course/next-js/