Routing - Linking and Navigating : 연결 및 탐색
Next.js 라우터는 클라이언트 측 네비게이팅과 함께 서버 중심 라우팅을 사용합니다. 즉각적인 로딩 상태와 동시 렌더링을 지원합니다. 즉, 탐색이 클라이언트 측 상태를 유지하고, 비용이 많이 드는 재렌더링을 피하며, 중단이 가능하고, 경쟁 조건을 일으키지 않습니다.
route 사이를 탐색(navigate)하는 방법에는 두 가지가 있습니다:
- <Link> 컴포넌트
- useRouter 훅
이 페이지에서는 <Link>, useRouter()를 사용하는 방법을 살펴보고 네비게이팅이 어떻게 작동하는지에 대해 자세히 알아볼 것입니다.
<Link> 컴포넌트
<Link>는 HTML <a> 엘리먼트를 확장하여 경로 간 프리페칭과 클라이언트 측 탐색을 제공하는 React 컴포넌트입니다. Next.js에서 경로 사이를 탐색하는 주요 방법입니다.
사용법
<Link>를 사용하려면 next/link에서 임포트하고 컴포넌트에 href prop을 전달하세요:
import Link from 'next/link';
export default function Page() {
return <Link href="/dashboard">Dashboard</Link>;
}<Link>에 전달할 수 있는 선택적 prop이 있습니다. 자세한 내용은 API 레퍼런스를 참조하세요.
예시: 다이나믹 세그먼트에 링크하기
다이나믹 세그먼트에 링크할 때 템플릿 리터럴 및 보간을 사용하여 링크 목록을 생성할 수 있습니다. 예를 들어 블로그 게시물 목록을 생성합니다:
// app/blog/PostList.jsx
import Link from 'next/link';
export default function PostList({ posts }) {
return (
<ul>
{posts.map((post) => (
<li key={post.id}>
<Link href={`/blog/${post.slug}`}>
{post.title}
</Link>
</li>
))}
</ul>
);
}
useRouter() Hook
useRouter 훅을 사용하면 클라이언트 컴포넌트 내에서 프로그래밍 방식으로 경로를 변경할 수 있습니다.
사용하려면 next/navigation에서 useRouter를 임포트하고 클라이언트 컴포넌트 내부에서 훅을 호출하세요:
useRouter는 push(), refresh() 등의 메서드를 제공합니다. 자세한 내용은 API 레퍼런스를 참조하세요.
권장 사항: 라우터 사용에 대한 특별한 요구 사항이 없는 한 <Link> 구성 요소를 사용하여 경로를 탐색하세요.
'use client';
import { useRouter } from 'next/navigation';
export default function Page() {
const router = useRouter();
return (
<button type="button" onClick={() => router.push('/dashboard')}>
Dashboard
</button>
);
}
내비게이션 작동 방식
- <Link>를 사용하거나 router.push()를 호출하면 경로 전환이 시작됩니다.
- 라우터가 브라우저의 주소 표시줄에서 URL을 업데이트합니다.
- 라우터는 클라이언트 측 캐시에서 변경되지 않은 세그먼트(예: 공유 레이아웃)를 재사용하여 불필요한 작업을 피합니다. 이를 부분 렌더링이라고도 합니다.
- 소프트 탐색 조건이 충족되면 라우터는 서버가 아닌 캐시에서 새 세그먼트를 가져옵니다. 그렇지 않은 경우 라우터는 하드 탐색을 수행하고 서버에서 서버 컴포넌트 페이로드를 가져옵니다.
- 생성된 경우 페이로드를 가져오는 동안 서버에서 로딩 UI가 표시됩니다.
- 라우터는 캐시된 페이로드 또는 새로운 페이로드를 사용하여 클라이언트에서 새 세그먼트를 렌더링합니다.
렌더링된 서버 구성 요소의 클라이언트 측 캐싱
알아두면 좋은 정보: 이 클라이언트 측 캐시는 서버 측 Next.js HTTP 캐시와 다릅니다.
새로운 라우터에는 서버 컴포넌트(페이로드)의 렌더링 결과를 저장하는 인메모리 클라이언트 측 캐시가 있습니다. 캐시는 라우팅 세그먼트별로 분할되어 어느 수준에서든 무효화를 허용하고 동시 렌더링 전반에서 일관성을 보장합니다.
사용자가 앱을 탐색할 때 라우터는 이전에 가져온 세그먼트와 미리 가져온 세그먼트의 페이로드를 캐시에 저장합니다.
즉, 특정 경우 라우터는 서버에 새로 요청하는 대신 캐시를 재사용할 수 있습니다. 이렇게 하면 데이터를 다시 가져오고 불필요하게 컴포넌트를 다시 렌더링하지 않아도 되므로 성능이 향상됩니다.
캐시 무효화하기
router.refresh()를 사용하여 경로를 새로 고칠 수 있습니다. 이렇게 하면 서버에 새 요청을 보내 데이터 요청을 다시 가져오고 서버 컴포넌트를 다시 렌더링합니다. 자세한 내용은 API 레퍼런스를 참조하세요. 앞으로는 변형을 하면 캐시가 자동으로 무효화됩니다.
프리페칭
Prefetching은 route를 방문하기 전에 백그라운드에서 경로를 미리 로드하는 방법입니다. 프리페치된 route의 렌더링 결과는 라우터의 클라이언트 측 캐시에 추가됩니다. 따라서 프리페치된 경로로 거의 즉시 이동할 수 있습니다.
기본적으로 route는 <Link> 컴포넌트를 사용할 때 뷰포트에 표시되는 대로 프리페치됩니다. 페이지가 처음 로드될 때 또는 스크롤할 때 발생할 수 있습니다. useRouter() Hook의 prefetch 메서드를 사용하여 프로그래밍 방식으로 route를 프리페치할 수도 있습니다.
정적 및 동적 route:
- 정적 route인 경우 route 세그먼트에 대한 모든 서버 컴포넌트 페이로드가 프리페치됩니다.
- 동적인 경우 첫 번째 공유 레이아웃부터 첫 번째 loading.js 파일까지 페이로드가 프리페치됩니다. 이렇게 하면 전체 경로를 동적으로 프리페치하는 데 드는 비용이 줄어들고 동적 경로에 대한 로딩 상태를 즉시 확인할 수 있습니다.
알아두면 좋습니다:
- 프리페칭은 프로덕션 환경에서만 활성화됩니다.
- 프리페칭은 <Link>에 prefetch={false}를 전달하여 비활성화할 수 있습니다.
하드 내비게이션
탐색 시, 캐시가 무효화되고 서버가 데이터를 새로 고침하여 변경된 세그먼트를 다시 렌더링합니다.
소프트 내비게이션
탐색 시, 변경된 세그먼트에 대한 캐시가있는 경우 재사용되며, 서버에 데이터를 새로 요청하지 않습니다.
소프트 내비게이션의 조건
탐색 시, 탐색 중인 route에 다이나믹 세그먼트가 포함되어 있지 않거나 현재 route와 동일한 동적 매개변수가 있는 경우 Next.js는 소프트 내비게이션을 사용합니다.
예를 들어 동적 [team] 세그먼트가 포함된 다음 경로를 고려하십시오: /dashboard/[team]/*.
dashboard/[team]/* 아래의 캐시된 세그먼트는 [team] 매개변수가 변경될 때만 무효화됩니다.
dashboard/team-red/*에서 /dashboard/team-red/*으로 이동하는 것은 소프트 탐색이 됩니다.
dashboard/team-red/*에서 /dashboard/team-blue/*으로 이동하는 것은 하드 탐색이 됩니다.
뒤로/앞으로 탐색
뒤로/앞으로 탐색(popstate event)은 소프트 탐색 으로 동작합니다. 즉, 클라이언트 측 캐시가 재사용되고 탐색이 거의 즉각적으로 이루어집니다.
포커싱 및 스크롤 관리
기본적으로 Next.js는 탐색에서 변경된 세그먼트를 보기 위해 focus를 설정하고 scroll합니다. 이 접근성 및 사용성 기능의 중요성은 고급 라우팅 패턴이 구현될 때 더욱 분명해질 것입니다.
요약)
페이지이동을 하는 방법에는 2가지가 있다.
<Link> : 안에 <a태그 생성>
useRouter : 'use clinent' 에서만 사용가능
웬만하면 <Link>를 쓰도록 권장한다.
사용자가 앱을 탐색할때 , 이전에 가져온 세그먼트랑 미리 가져온 세그먼트를 캐시에 저장함.
소프트탐색조건이 되면 캐시에서 새 세그먼트를 가져와서 라우팅, 캐시에 없으면 하드탐색 수행하고 서버에서 서버 컴포넌트 페이로드를 가져옴 (한번 갔던페이지는 기억함)
소프트 네비게이션: 캐시가 있을경우. 이전으로 이동, 다음으로 이동.
하드 네비게이션: 이전 세그먼트가 변경됐을때, 캐시 무효화되고 서버가 데이터를 새로 고침하여 변경된 세그먼트를 다시 렌더링
프리페칭
프리페치는 라우트를 백그라운드에서 미리 로드하는건데, 프리페칭은 프로덕션에서만 활성화 된다.
<Link>는 뷰포트에 그릴때 자동으로 프리페치되는데 false를 전달해서 비활성화 할수있고,
useRouter()는 메서드 prefetch 를 통해 설정가능.