주말이니까 챕터 하나만 할까..? 생각도 했었는데 chapter 4의 내용이 별 것 없어서 5까지 진행하기로 했다.
navigation을 최적화 하는이유
페이지들을 이동 할 때, 예전에는 a tag를 사용해 이동을 했다. 이 a tag는 이동할 때 페이지 전체의 refresh를 일으키는데, 이는 비용을 많이 사용하게 된다.
The <Link> component
nextjs에서는 <Link> 를 사용해 페이지들 사이를 이동한다. 이는 눌렀을 때 client side navigation을 가능하게 한다. (서버에 요청하여 해당 페이지의 정보를 받아오는 것이 아닌, client side에 저장된 페이지의 정보를 스위칭한다는 뜻 같다)
사용법은 기존의 a tag를 Link로 바꿔주면 된다.
Automatic code-splitting and prefetching
nextjs는 기존의 react spa와 달리 route segment에 따라 자동으로 code split을 실행한다.
기존의 react spa가 처음 로드시 전체의 코드를 load하는 것과는 많이 다르다.
이렇게 코드를 분리하면 page들은 독립적으로 작동하게 되어, 특정 페이지가 에러를 만들어도 나머지 페이지들을 작동하게 된다.
여기서 의문점이 들 수 있는데, 기존의 spa는 전체 페이지를 로드하여 페이지간의 이동이 즉각적이고 빠르게 될 수 있었는데, 독립적으로 로드했는데 어떻게 nextjs는 그럴 수 있을까?
설명을 쭉 읽어보면 nextjs에서는 Link 컴포넌트가 있는 페이지에서는 background에서 해당 페이지를 미리 로딩(prefetching)하여 빠르게 다음 페이지를 제공한다고 한다.
Pattern: Showing active links
웹을 만들다 보면 사용자가 현재 어느곳에 있는지(active links)를 보여줘야할 때가 많다. 이를 위해서 nextjs에서는 usePathname이라는 훅을 제공한다. 훅을 사용하기 위해서는 우리가 작성한 컴포넌트를 클라이언트 컴포넌트로 바꿔줘야 한다고 한다.
이를 위해 파일 상단에 "use client" 라는 dirctive를 선언하고 usePathname으로 현재 path를 알아낸 후에 챕터 2에서 다룬것 처럼 clsx를 사용해 스타일을 적용해 준다.
'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>
);
})}
</>
);
}
잠깐사이에 굉장히 많은 생소한 단어들이 나왔는데 하나씩 찾아보았다.
'use client' : nextjs의 컴포넌트들은 기본적으로 서버 컴포넌트이다. 하지만 usePathname과 같은 훅들은 사용자의 반응(행동)에 따른 정보를 받기 때문에 클라이언트 컴포넌트에서만 사용할 수 있다.
때문에 use client를 사용해 클라이언트 컴포넌트라는 것을 알려주어야 한다.
서버 컴포넌트 : 서버에서 렌더링 되고 캐싱될 수 있는 컴포넌트를 말한다. 상기한 것처럼 code splitting과 prefetching이 적용된다.
클라이언트 컴포넌트 : 사용자의 행동에 따라 반응하여 렌더링되는 컴포넌트이다. 사용자가 클릭을 하거나, 생명주기에 따른 동작이 필요할 때 사용한다.
슬슬 머리아픈게 하나씩 있는데 아무래도 글이 튜토리얼이다 보니 그냥 넘어가는 분위기이다. 덕분에 하나하나 찾는데 머리가 아프긴 하지만, 재미가 있으니 괜찮은거 아닐까
참고자료
https://nextjs.org/learn/dashboard-app/navigating-between-pages
https://react.dev/reference/react/use-client
https://nextjs.org/docs/app/building-your-application/rendering/server-components
https://nextjs.org/docs/app/building-your-application/rendering/client-components
