The <Link> component에 대해서 (Next.js 공식문서 참고)

park.js·2024년 8월 28일

FrontEnd Develop log

목록 보기

20/37

이 글에서는 Next.js의 Link 컴포넌트와 그것이 일반적인 <a> 태그와 어떻게 다른지, 그리고 Next.js가 페이지 전환을 더 빠르고 부드럽게 만드는 이유를 설명하고 있다.

Link 컴포넌트와 페이지 전환의 차이점

일반적인 웹사이트에서 <a> 태그를 클릭하면, 브라우저가 새 페이지를 로드할 때 전체 페이지가 새로고침된다. 이 과정에서 화면이 깜빡이거나, 로딩 시간이 길어질 수 있다.

하지만 Next.js의 <Link> 컴포넌트를 사용하면, 페이지 전환 시 전체 페이지를 새로고침하지 않는다. 대신, 필요한 부분만 새로고침하여 빠르고 부드러운 전환을 제공한다.

왜 페이지 전환이 더 빠를까?

자동 코드 분할(Code-Splitting): Next.js는 각 페이지를 독립된 코드 조각으로 나누어 관리한다. 브라우저가 한꺼번에 모든 코드를 불러오는 대신, 사용자가 필요로 하는 페이지의 코드만 불러온다. 이렇게 하면 초기 로딩 시간이 줄어들고, 페이지 전환도 더 빨라진다.

사전 로딩(Prefetching): 사용자가 <Link>로 연결된 링크를 클릭하기 전에, Next.js는 해당 페이지의 코드를 미리 백그라운드에서 로딩한다. 그래서 사용자가 링크를 클릭하면 페이지가 이미 로드되어, 거의 즉시 전환된다.

공식문서 코드 참고 코드
https://nextjs.org/learn/dashboard-app/navigating-between-pages

import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from "@heroicons/react/24/outline";
import Link from "next/link";

// Map of links to display in the side navigation.
// Depending on the size of the application, this would be stored in a database.
const links = [
  { name: "Home", href: "/dashboard", icon: HomeIcon },
  {
    name: "Invoices",
    href: "/dashboard/invoices",
    icon: DocumentDuplicateIcon,
  },
  { name: "Customers", href: "/dashboard/customers", icon: UserGroupIcon },
];

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>
        );
      })}
    </>
  );
}

주어진 코드 예시 설명

위 코드는 사이드 내비게이션에 사용할 링크 목록을 표시하는 React 컴포넌트이다.

links 배열에 링크 정보가 저장되어 있으며, 각 링크에는 이름(name), 경로(href), 아이콘(icon)이 포함되어 있다.

컴포넌트는 map 메서드를 사용해 links 배열의 각 항목을 <Link> 컴포넌트로 렌더링한다.

각 링크는 사이드바에서 버튼처럼 보이도록 스타일링되어 있으며, 아이콘과 텍스트가 함께 표시된다.

화면 크기에 따라 아이콘과 텍스트가 다르게 표시되며, 작은 화면에서는 아이콘만 보이고, 큰 화면에서는 텍스트도 함께 보인다.

이 코드와 설명에서 보여지는 것처럼, Next.js의 <Link> 컴포넌트를 사용하면 빠르고 부드러운 페이지 전환이 가능하며, 이는 자동 코드 분할과 사전 로딩 덕분이다. 그래서 사용자는 전체 페이지를 새로고침하지 않아도 마치 앱을 사용하는 것처럼 웹사이트를 빠르게 탐색할 수 있다.

Code-Splitting이 뭐징? (코드 분할)

코드 분할은 애플리케이션의 코드를 여러 개의 작은 파일로 나누어, 필요할 때마다 해당 파일만 로드하는 기술이다. 이를 통해 웹사이트의 초기 로딩 속도를 크게 개선할 수 있다.

쉽게 설명하자면

기존 방식: 웹사이트가 처음 로드될 때, 모든 코드(HTML, CSS, JavaScript 등)를 한꺼번에 불러온다. 이 방식은 코드의 양이 많아질수록 로딩 시간이 길어지게 만든다.

코드 분할 방식: 애플리케이션을 여러 개의 "조각"(청크)으로 나누어, 사용자에게 필요한 부분만 로딩한다. 예를 들어, 사용자가 첫 페이지를 방문할 때는 그 페이지에 필요한 코드만 로드하고, 나중에 다른 페이지를 방문할 때 필요한 코드만 추가로 로드한다.

아직도 이해 안됨 예시로 ㄱㄱ

영화: 과제를 위해 영화를 한 번에 다 보지 않고, 한 장면씩 나눠서 필요한 장면만 보는것. 한 번에 모든 장면을 보는 것보다 훨씬 빠르고 효율적이다. 코드 분할도 이와 비슷

Next.js에서의 활용: Next.js는 각 페이지를 별도의 코드 청크로 나눈다. 사용자가 특정 페이지에 접근할 때만 그 페이지의 코드가 로드된. 다른 페이지의 코드는 필요할 때까지 로드되지 않는다.

Prefetching은 또뭐징? (사전 로딩)

사전 로딩은 사용자가 링크를 클릭하기 전에, 브라우저가 해당 페이지의 코드를 미리 백그라운드에서 다운로드하여 준비해 놓는 기술이다. 이렇게 하면 사용자가 링크를 클릭할 때 페이지가 이미 준비되어 있어, 거의 즉시 전환이 이루어진다.

쉽게 설명ㄱㄱ

기존 방식: 사용자가 링크를 클릭할 때마다 브라우저가 서버에 요청을 보내고, 새로운 페이지의 코드를 다운로드하여 로드한다. 이 과정은 시간이 걸리고, 페이지 전환이 느려질 수 있다.

사전 로딩 방식: Next.js는 사용자가 링크를 클릭하기도 전에 해당 페이지의 코드를 미리 다운로드해 놓는다. 사용자가 링크를 클릭하면 이미 코드가 로드되어 있기 때문에, 페이지 전환이 또 거의 즉시 이루어진다.

또 예시로 ㄱㄱ

레스토랑 예약: 레스토랑에 가기 전에 미리 예약을 해두면, 도착했을 때 기다릴 필요 없이 바로 자리에 앉을 수 있다. 사전 로딩도 이와 비슷 페이지를 방문하기 전에 미리 준비해두는 것.

Next.js에서의 활용: Next.js는 <Link> 컴포넌트가 화면에 보이기만 해도, 해당 링크에 연결된 페이지를 백그라운드에서 미리 로딩한다 이게이게이게이게 핵심이다! 사용자가 링크를 클릭할 때 페이지가 이미 준비되어 있으므로, 즉시 화면에 표시된다.

결론

코드 분할(Code-Splitting)은 필요한 코드만 로드하여 웹사이트의 초기 로딩 속도를 개선하는 기술. 이로 인해 페이지를 빠르게 로드.

사전 로딩(Prefetching)은 사용자가 페이지를 방문하기 전에 필요한 데이터를 미리 로드하여, 페이지 전환을 즉시 빠르게 만드는 기술.