Skip to main content

페이지 이동

넥스트에서 페이지를 이동할 때 알아야 하는 <Link> 컴포넌트와 useRouter() 훅을 살펴보겠습니다.

넥스트는 <Link> 라는 컴포넌트를 제공합니다. 이 컴포넌트는 <a>와 같이 페이지를 이동할 때 사용합니다.

components/home.jsx
import Link from 'next/link'

function Home() {
  return (
    <div>
      <Link href="/">Main</Link>
      <Link href="/login">Login</Link>
    </div>
  )
}

위 코드가 브라우저에서 실행되면 최종적으로 다음과 같은 태그 구조를 갖게 됩니다.

<div>
  <a href="/">Main</a>
  <a href="/login">Login</a>
</div>

그럼 왜 <a> 태그가 아니라 <Link> 컴포넌트를 써야 할까요?

<Link> 컴포넌트로 페이지를 이동하면 마치 싱글 페이지 애플리케이션(Single Page Application)의 라우터처럼 이동하게 됩니다. 보통 페이지를 이동할 때 해당 페이지 정보(HTML)를 서버에 요청하고 받아와 그려야 하는데, 싱글 페이지 애플리케이션의 라우터 방식을 이용하게 되면 클라이언트 레벨에서 페이지를 이동할 수 있게 되기 때문에 좀 더 페이지간 전환이 빠르고 매끄럽죠.

또한, <Link> 컴포넌트가 위치한 UI 영역이 뷰포트(viewport)에 잡히면 넥스트 내부적으로 해당 페이지 데이터를 미리 요청해 둡니다. 이걸 prefetching 이라고 합니다. 미리 다음 페이지 데이터가 요청되어 있다면 클릭했을 때 거의 즉시 페이지 로딩이 일어날 수 있겠죠? 이런 장점들 때문에 <a>보다는 <Link> 컴포넌트를 사용하는 걸 권장합니다.

<Link> 컴포넌트는 리액트 컴포넌트이기 때문에 다음과 같이 href 속성에 백틱으로 자바스크립트 변수 값을 연결할 수 있습니다.

const blogId = '1';
<Link href={`/blog/${blogId}`}>

혹은 단순한 문자열 형태가 아니라 다음과 같이 객체 형태로 URL 값을 지정할 수도 있습니다.

<Link
  href={{
    pathname: '/blog/[blogId]',
    query: { blogId: '1' },
  }}
>
  • pathname : URL 형태의 값. pages 폴더 밑의 페이지 이름
  • query : pathname에 지정한 [] 안에 들어갈 값을 정의하는 속성
tip

위 pathname, query가 가장 흔하게 사용되는 속성들이지만 더 많은 옵션들이 궁금하다면 다음 문서를 확인하세요.
Link with URL 문서

useRouter() - Link 컴포넌트 이외에 페이지 이동 방법​

사용자가 Link 컴포넌트를 클릭하지 않고, 키보드 엔터를 입력했을 때 페이지를 이동시키려면 어떻게 해야 할까요? 이렇게 특정 코드가 실행되는 시점에 페이지를 이동시키려면 Link 컴포넌트를 사용할 수 없습니다. 이때 사용할 수 있는 방법은 useRouter() 훅입니다.

import { useRouter } from 'next/router'
 
export default function App() {
  const router = useRouter()
  if (keyEvent === 'enter') {
    router.push('/login');
  }
}

이 코드는 useRouter() 훅을 어떻게 사용하는지 보여줍니다. 훅을 호출하면 router 라는 객체가 반환되고, 이 객체의 router.push()를 이용해서 페이지를 이동할 수 있습니다.

tip

useRouter() 훅의 상세한 옵션을 보고 싶다면 아래 문서를 확인하세요.
useRouter API 문서

warning

useRouter() 훅은 앱 라우터의 클라이언트 컴포넌트에서만 사용할 수 있습니다. 서버 컴포넌트에서 사용할 수 없습니다.