클라이언트 컴포넌트 훅이며

"usePathname"은 클라이언트 컴포넌트에서 사용하는 훅으로, 현재 URL의 경로명(pathname)을 읽을 수 있게 해줍니다.

“usePathname”은 의도적으로 클라이언트 컴포넌트를 사용해야 한다.

클라이언트 컴포넌트를 사용하는 것은 최적화를 해제하는 것이 아니라 Server Components 아키텍처의 중요한 부분이다.

예를 들어, usePathname을 가진 클라이언트 컴포넌트는 초기 페이지 로드 시 HTML로 렌더링 된다.

새 경로로 이동할 때 이 컴포넌트를 다시 가져올 필요가 없다. 대신, 컴포넌트는 한 번(클라이언트 JavaScript 번들에) 다운로드 되고 현재 상태에 기반하여 다시 렌더링 된다.

알아 두어야 할 점 :

• Server Components에서 현재 URL을 읽는 것은 지원되지 않는다. 이 설계는 페이지 이동간에 레이아웃 상태를 보존하기 위해 의도적으로 이루어졌다.
• 호환성 모드:
  • usePathname은 Next.js에서 자동으로 생성한 대체 경로(fallback route)가 렌더링 되거나 페이지 디렉토리 페이지가 자동으로 정적으로 최적화 되었을 때 null을 반환할 수 있다. 이 때는 라우터는 준비되지 않은 상태이다.
• Next.js는 프로젝트에서 앱과 페이지 디렉터리가 동시에 감지되면 자동으로 타입을 업데이트 한다.

Parameters

const pathname = usePathname()

Returns

"usePathname"은 현재 URL의 경로명(pathname)을 문자열로 반환합니다. 예를 들면: