05. 페이지간 이동

이전 장에서는 대시보드 레이아웃과 페이지를 생성했었다. 이제 사용자가 대시보드 경로 간을 탐색할 수 있도록 몇 가지 링크를 추가해 보겠다.

 

이 챕터에서 다루는 주제는 아래와 같다.

• next/link 컴포넌트를 사용하는 방법.
• usePathname() 후크를 사용하여 활성 링크를 표시하는 방법.
• Next.js에서 탐색이 작동하는 방식.

 

탐색을 최적화하는 이유는 무엇입니까?

페이지를 연결하려면 일반적으로 <a> 엘리먼트를 사용합니다. 현재 사이드바 링크는 <a> 엘리먼트를 사용하지만 브라우저에서 홈, 송장, 고객 페이지 사이를 탐색할 때 어떤 일이 발생하는지 확인하자.

각 페이지 탐색에 전체 페이지 새로 고침이 있다!

 

<Link> 컴포넌트

Next.js에서는 <Link /> 컴포넌트를 사용하여 애플리케이션의 페이지 간을 연결할 수 있다. <Link>를 사용하면 JavaScript로 클라이언트 측 탐색을 수행할 수 있다. <Link /> 컴포넌트를 사용하려면 /app/ui/dashboard/nav-links.tsx를 열고 next/link에서 Link 컴포넌트를 가져오고, 그 다음 태그를 <Link>로 바꾸자.

 

/app/ui/dashboard/nav-links.tsx

import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
 
// ...
 
export default function NavLinks() {
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

 

보시다시피 Link 컴포넌트는 <a> 태그를 사용하는 것과 유사하지만 <a href="…"> 대신 <Link href="…">를 사용한다.

변경 사항을 저장하고 로컬 호스트에서 작동하는지 확인해보자. 이제 전체 새로고침을 보지 않고도 페이지 사이를 탐색할 수 있다. 애플리케이션의 일부가 서버에서 렌더링되지만 전체 페이지 새로 고침이 없으므로 웹 앱처럼 느껴질 것이다.

 

신기하다.

 

자동 코드 분할 및 프리패치

탐색 경험을 향상시키기 위해 Next.js는 경로 세그먼트별로 애플리케이션을 자동으로 코드를 분할한다. 이는 브라우저가 초기 로드 시 모든 애플리케이션 코드를 로드하는 기존 React SPA와 다르다.

경로별로 코드를 분할한다는 것은 페이지가 격리된다는 의미다. 특정 페이지에서 오류가 발생하더라도 애플리케이션의 나머지 부분은 계속 작동할 것이다.

또한 프로덕션 환경에서 <Link> 컴포넌트가 브라우저의 뷰포트에 나타날 때마다 Next.js는 백그라운드에서 연결된 경로에 대한 코드를 자동으로 미리 가져온다. 사용자가 링크를 클릭하면 대상 페이지의 코드가 이미 백그라운드에 로드되어 페이지 전환이 거의 즉각적으로 이루어진다!

 

탐색 작동 방식에 대해 자세히 알아보자.

 

패턴: 활성 링크 표시

일반적인 UI 패턴은 사용자가 현재 어떤 페이지에 있는지 알려주는 활성 링크를 표시하는 것이다. 이렇게 하려면 URL에서 사용자의 현재 경로를 가져와야 한다. Next.js는 경로를 확인하고 이 패턴을 구현하는 데 사용할 수 있는 usePathname()이라는 후크를 제공하고 있다.

 

usePathname()은 후크이므로 nav-links.tsx를 클라이언트 컴포넌트로 전환해야 한다. 파일 상단에 React의 "use client" 지시문을 추가한 후 next/navigation에서 usePathname()을 가져온다.

 

/app/ui/dashboard/nav-links.tsx

'use client';
 
import {
  UserGroupIcon,
  HomeIcon,
  InboxIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
 
// ...

 

다음으로, <NavLinks /> 컴포넌트 내에서 pathname이라는 변수에 경로를 할당한다.

 

/app/ui/dashboard/nav-links.tsx

export default function NavLinks() {
  const pathname = usePathname();
  // ...
}

 

CSS 스타일 장에 소개된 clsx 라이브러리를 사용하여 링크가 활성화될 때 클래스 이름을 조건부로 적용할 수 있다. link.href가 경로 이름과 일치하면 링크는 파란색 텍스트와 연한 파란색 배경으로 표시되어야 한다.

 

nav-links.tsx의 최종 코드는 다음과 같다.

 

/app/ui/dashboard/nav-links.tsx

'use client';
 
import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import clsx from 'clsx';
 
// ...
 
export default function NavLinks() {
  const pathname = usePathname();
 
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className={clsx(
              'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
              {
                'bg-sky-100 text-blue-600': pathname === link.href,
              },
            )}
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

 

로컬 호스트를 저장하고 확인해보자. 이제 파란색으로 강조 표시된 활성 링크가 표시될 것이다.