Link Component (feat. nextJs)

2023. 02. 16

Next.js는 React 기반의 서버사이드 렌더링 프레임워크입니다. 이를 통해 React를 사용한 웹 어플리케이션을 개발할 때 SEO(Search Engine Optimization) 최적화, 초기 로딩 속도 개선 등의 이점을 얻을 수 있습니다. 이번에는 Next.js에서 많이 사용되는 Link 컴포넌트에 대해 알아보도록 하겠습니다.

 

Link 컴포넌트란?

Link 컴포넌트는 Next.js에서 제공하는 내장 컴포넌트로, 페이지 간의 이동을 가능하게 해주는 역할을 합니다. 일반적인 <a> 태그와 달리 페이지 이동 시, 브라우저가 새로운 페이지를 서버로부터 다시 불러오지 않고, Next.js가 제공하는 클라이언트 사이드 라우팅 방식으로 페이지 이동이 가능합니다.

 

Link 컴포넌트의 사용법

Link 컴포넌트는 다음과 같이 사용합니다.

import Link from 'next/link';

function Home() {
  return (
    <div>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  );
}

 

Link 컴포넌트는 href props를 필수로 받으며, 이는 이동하고자 하는 페이지의 경로를 지정합니다. <a> 태그는 Link 컴포넌트의 자식으로 작성하며, 이는 이동하고자 하는 링크를 나타냅니다.

 

Link 컴포넌트의 prefetching

Link 컴포넌트는 페이지 이동 전, 브라우저가 해당 페이지의 컴포넌트를 미리 로딩하는 기능을 제공합니다. 이를 prefetching이라고 합니다. 이 기능을 사용하면 다음 페이지 로딩 속도가 빨라져 사용자 경험을 향상시킬 수 있습니다.

<Link href="/about" prefetch>
  <a>About</a>
</Link>

Link 컴포넌트에 prefetch props를 추가하면, 해당 페이지의 컴포넌트를 미리 로딩합니다.

 

Link 컴포넌트의 다양한 속성

Link 컴포넌트는 다양한 속성을 가지고 있습니다. 이 중 가장 자주 사용되는 속성은 다음과 같습니다.

• href: 이동하고자 하는 페이지의 경로를 지정합니다. 필수 속성입니다.
• as: 브라우저에 표시되는 경로를 지정합니다.
• replace: true로 설정하면, 브라우저의 history 스택에서 현재 페이지를 대체합니다.
• scroll: 이동하고자 하는 페이지의 스크롤 위치

 

Link 컴포넌트와 A 태그 비교 + 정리

Link 컴포넌트와 <a> 링크는 모두 웹 페이지에서 다른 페이지로 이동할 때 사용됩니다. 그러나 Next.js에서는 Link 컴포넌트를 사용하는 것이 일반적으로 권장됩니다. 그 이유는 다음과 같습니다.

1. 클라이언트 사이드 라우팅 Link 컴포넌트는 클라이언트 사이드 라우팅을 사용하여 페이지를 이동합니다. 이는 페이지 이동 시 서버에 새로운 페이지를 요청하는 것이 아니라, 브라우저에서 페이지를 로드하여 더 나은 사용자 경험을 제공합니다. 반면에 <a> 링크는 서버로 새로운 페이지를 요청하기 때문에 페이지 이동 속도가 느리고 사용자 경험이 좋지 않을 수 있습니다.
2. Prefetching Link 컴포넌트는 페이지 이동 전, 브라우저가 해당 페이지의 컴포넌트를 미리 로딩하는 기능을 제공합니다. 이를 prefetching이라고 합니다. 이 기능을 사용하면 다음 페이지 로딩 속도가 빨라져 사용자 경험을 향상시킬 수 있습니다.
3. SEO 최적화 Link 컴포넌트는 <a> 링크와 달리 서버 사이드 렌더링을 지원하기 때문에 SEO(Search Engine Optimization) 최적화가 용이합니다. 검색 엔진은 페이지의 컨텐츠를 크롤링하기 위해 HTML 코드를 분석합니다. Link 컴포넌트를 사용하면 Next.js가 페이지를 서버 측에서 렌더링하기 때문에, 검색 엔진은 더 잘 이해할 수 있습니다.
4. 코드 분할 Link 컴포넌트를 사용하면, Next.js에서 제공하는 코드 분할 기능을 활용할 수 있습니다. 코드 분할은 페이지가 로드될 때 필요한 JavaScript 코드만 불러오도록 하는 기능으로, 페이지 로딩 속도를 높여줍니다.

따라서, Next.js를 사용할 때는 Link 컴포넌트를 사용하는 것이 좋습니다. 다만, 특정 상황에서는 <a> 링크를 사용해야 하는 경우가 있을 수 있습니다. 예를 들어, 외부 링크로 이동하는 경우에는 <a> 링크를 사용하는 것이 적절합니다.