[Next.js] 14 버전에서 Link 컴포넌트 심층 분석!

Next.js는 React 기반 웹 애플리케이션 프레임워크로, 페이지 전환 및 라우팅 기능을 강화하여 사용자 경험을 향상시킵니다. Next.js 14 버전에서는 Link 컴포넌트에 여러 가지 새로운 기능과 개선 사항이 도입되었습니다. 이 블로그 게시글에서는 Link 컴포넌트의 주요 기능과 속성을 자세히 살펴보고, 실제 예시를 통해 각 속성의 작동 방식을 이해할 것입니다.

[Next.js] 14 버전에서 Link 컴포넌트 심층 분석!

1. Link 컴포넌트 기본 개요

Link 컴포넌트는 Next.js에서 페이지 간 이동을 위한 핵심 요소입니다. 기본적으로 HTML <a> 태그와 유사하게 작동하지만, 클라이언트 측 라우팅, 프리페칭, 스크롤링 제어 등 Next.js 특화 기능을 제공합니다.

1.1. 기본 사용법

Link 컴포넌트는 다음과 같이 간단하게 사용할 수 있습니다:

import Link from 'next/link';

const MyLink = () => {
  return (
    <Link href="/about">
      About Page
    </Link>
  );
};

위 코드는 /about 페이지로 이동하는 링크를 생성합니다. href 속성은 이동하려는 페이지의 URL 경로를 지정합니다.

1.2. Link 컴포넌트의 장점:

• 클라이언트 측 라우팅: 페이지 전환 시 새 페이지를 로드하지 않고 자체적으로 처리하여 페이지 로딩 속도를 높입니다.
• 프리페칭: 사용자가 링크를 클릭하기 전에 페이지를 미리 로드하여 페이지 전환 지연을 줄입니다.
• 스크롤링 제어: 링크 클릭 시 스크롤 위치를 원하는 위치로 이동시킬 수 있습니다.
• 접근성 향상: aria-label 속성을 통해 스크린 리더 사용자에게 링크 정보를 제공합니다.

2. 주요 속성 및 기능

Link 컴포넌트는 다양한 속성을 통해 라우팅 동작을 세밀하게 조정할 수 있습니다.

2.1. href 속성:

• 이동하려는 페이지의 URL 경로를 지정합니다.
• 절대 경로 (예: /about) 또는 상대 경로 (예: ../about) 를 사용할 수 있습니다.
• 쿼리 파라미터를 추가할 수 있습니다 (예: /about?id=1).

2.2. replace 속성:

• 기존 히스토리 기록을 대체하여 뒤로 가기 버튼을 클릭했을 때 이전 페이지로 돌아가지 못하게 합니다.
• 기본값은 false입니다.

2.3. scroll 속성:

• 링크 클릭 시 스크롤 위치를 원하는 위치로 이동시킵니다.
• 다음과 같은 값을 사용할 수 있습니다:
  • true: 페이지 상단으로 스크롤합니다.
  • false: 스크롤 위치를 유지합니다.
  • smooth: 부드럽게 스크롤합니다.
  • shallow: 현재 페이지 내 해시 태그 위치로 스크롤합니다.

2.4. prefetch 속성:

• 사용자가 링크를 클릭하기 전에 페이지를 미리 로드하여 페이지 전환 지연을 줄입니다.
• 기본값은 false입니다.
• true 또는 ssr 값을 사용할 수 있습니다.
  • true: 페이지를 비동기적으로 백그라운드에서 로드합니다.
  • ssr: 페이지를 서버 측에서 사전 렌더링합니다.

2.5. shallow 속성:

• 현재 페이지 내 해시 태그 위치로 이동합니다.
• 기본값은 false입니다.

2.6. as 속성:

• 실제 URL과 다른 링크 경로를 표시할 수 있습니다.
• SEO 또는 접근성 향상에 유용합니다.

2.7. passHref 속성:

• href 속성 값을 자식 컴포넌트로 전달합니다.
• 기본값은 false입니다.

2.8. onClick 속성:

• 링크 클릭 시 JavaScript 함수를 실행합니다.
• 기본 동작을 취소하거나 추가 작업을 수행하는 데 사용할 수 있습니다.

2.9. aria-label 속성:

• 스크린 리더 사용자에게 링크 정보를 제공합니다.
• 접근성 향상을 위해 필수적인 속성입니다.

3. 실제 예시

다음은 Link 컴포넌트의 주요 속성을 보여주는 실제 예시입니다.

3.1. 기본적인 페이지 이동:

<Link href="/about">
  About Page
</Link>

3.2. 쿼리 파라미터 추가:

<Link href="/product?id=123">
  Product Details
</Link>

3.3. 뒤로 가기 버튼 비활성화:

<Link href="/about" replace>
  About Page
</Link>

3.4. 스크롤 위치 조정:

<Link href="/contact" scroll={true}>
  Contact Us
</Link>

3.5. 페이지 프리페칭:

<Link href="/blog" prefetch>
  Blog Page
</Link>

3.6. 현재 페이지 내 해시 태그 위치로 이동:

<Link href="#section-two" shallow>
  Section Two
</Link>

3.7. 실제 URL과 다른 링크 경로 표시:

<Link href="/about" as="/info">
  About Us
</Link>

3.8. 자식 컴포넌트로 href 속성 값 전달:

const MyLink = ({ href }) => {
  return (
    <a href={href}>
      Click Here
    </a>
  );
};

<Link href="/home" passHref>
  <MyLink />
</Link>

3.9. 링크 클릭 시 JavaScript 함수 실행:

<Link href="/login" onClick={() => alert("Login")}>
  Login
</Link>

3.10. 스크린 리더 사용자를 위한 정보 제공:

<Link href="/terms" aria-label="Terms of Service">
  Terms of Service
</Link>

4. 결론

Next.js 14 버전에서 Link 컴포넌트는 다양한 속성과 기능을 통해 클라이언트 측 라우팅, 프리페칭, 스크롤링 제어 등을 손쉽게 구현할 수 있도록 지원합니다. 위에 설명된 기능들을 활용하여 사용자 경험을 향상시키고 웹 애플리케이션의 성능을 최적화할 수 있습니다. 버전 및 App Router 혹은 Page Router에 따라 속성이 조금은 다를 수도 있으니, 꼭 공식 문서를 참조하길 바랍니다.

 

https://nextjs.org/docs/app/api-reference/components/link

Components: <Link> | Next.js