[ Next.js ] 5장 페이지 이동

Об этом предложении

5장 페이지 이동 내비게이션을 최적화해야하는 이유 페이지 간 링크를 걸 때 HTML 요소 사용해왔음. 현재 ᅡ이드바 링크는 요소 사용 → 브라우저에서 홈, 송장, 고객 페이지 사이 이동 시 어떤 일이 일어나는지 주목할 수 있음 HTML <a> 태그 HTML의 <a href="..."> 태그로 이동 시 페이지 전체가 새로고침됨 컴포넌트 <Link> Next.js에서는 컴포넌트 사용 → 애플리케이션 내 페이지 간 링크 걸 수 있음 태그를 사용하는 것과 비슷하지만 <Link href="..."> 형태로 작성 자바스크립트를 이용 → 필요한 부분만 전환하는 클라이언트 사이드 내비게이션 수행 자동 코드 분할 및 프리페칭 자동 코드 분할 내비게이션 경험 개선을 위해 Next.js는 자동으로 코드를 경로 구간별로 나눔 → 전통적인 React SPA와는 다름 전통적인 React SPA : 브라우저가 초기 페이지 로드 시 모든 애플리케이션 코드를 로드함 코드 경로 별로 분할 시 페이지가 분리됨 → 특정 페이지 오류 발생해도 나머지 애플리케이션은 여전히 작동함 + 브라우저가 파싱할 코드가 줄어들어 애플리케이션이 더 빠름 프리페칭 <Link> 컴포넌트가 브라우저 뷰포트에 나타나면 Next.js 백그라운드에서 링크된 경로의 코드 자동으로 미리 가져옴 → 사용자가 링크 클릭 시 이미 코드가 준비됨 → 즉시 전환됨 활성 링크 표시 사용자가 현재 어떤 페이지에 있는지 알리기 위해 아이콘 / 글씨에 색을 넣어 활성 링크를 표시하는 디자인 패턴 Next.js는 usePathname() 이라는 훅 제공 → 이를 통해 경로 확인 + 패턴 구현 가능 usePathname() 이 React 훅이므로 클라이언트 컴포넌트로 전환해야함 → 해당 파일 상단에 'use client' 선언을 추가하여 전환해야 함

Детали предложения

Провайдер

velog

Источник

velog-rss

Балл

54.36

Уверенность

49%