useSelectedLayoutSegments

useSelectedLayoutSegments는 호출된 레이아웃 아래의 활성 경로 세그먼트를 읽을 수 있게 해주는 클라이언트 컴포넌트 훅입니다.

이는 활성 자식 세그먼트에 대한 정보가 필요한 부모 레이아웃에서 UI를 만드는 데 유용합니다. 예를 들어 브레드크럼과 같은 요소를 만들 때 사용할 수 있습니다.

app/example-client-component.tsx

"use client";
 
import { useSelectedLayoutSegments } from "next/navigation";
 
export default function ExampleClientComponent() {
  const segments = useSelectedLayoutSegments();
 
  return (
    <ul>
      {segments.map((segment, index) => (
        <li key={index}>{segment}</li>
      ))}
    </ul>
  );
}

app/example-client-component.js

"use client";
 
import { useSelectedLayoutSegments } from "next/navigation";
 
export default function ExampleClientComponent() {
  const segments = useSelectedLayoutSegments();
 
  return (
    <ul>
      {segments.map((segment, index) => (
        <li key={index}>{segment}</li>
      ))}
    </ul>
  );
}

알아두면 좋은 점:

useSelectedLayoutSegments는 클라이언트 컴포넌트 훅이고, 레이아웃은 기본적으로 서버 컴포넌트이므로, useSelectedLayoutSegments는 일반적으로 레이아웃으로 가져오는 클라이언트 컴포넌트를 통해 호출됩니다.

반환된 세그먼트에는 라우트 그룹이 포함되어 있으며, 이를 UI에 포함시키고 싶지 않을 수 있습니다. filter() 배열 메서드를 사용하여 대괄호로 시작하는 항목을 제거할 수 있습니다.

매개변수

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

useSelectedLayoutSegments는 선택적으로 parallelRoutesKey를 받습니다. 이를 통해 해당 슬롯 내의 활성 경로 세그먼트를 읽을 수 있습니다.

반환값

useSelectedLayoutSegments는 훅이 호출된 레이아웃에서 한 단계 아래의 활성 세그먼트를 포함하는 문자열 배열을 반환합니다. 존재하지 않는 경우 빈 배열을 반환합니다.

예를 들어, 아래의 레이아웃과 URL이 주어졌을 때, 반환되는 세그먼트는 다음과 같습니다:

레이아웃	방문한 URL	반환된 세그먼트
`app/layout.js`	`/`	`[]`
`app/layout.js`	`/dashboard`	`['dashboard']`
`app/layout.js`	`/dashboard/settings`	`['dashboard', 'settings']`
`app/dashboard/layout.js`	`/dashboard`	`[]`
`app/dashboard/layout.js`	`/dashboard/settings`	`['settings']`

버전 기록

버전	변경 사항
`v13.0.0`	`useSelectedLayoutSegments` 도입됨.

useSelectedLayoutSegment userAgent