[Next.js beta doc] useSelectedLayoutSements

Next.js 베타 문서 번역 프로젝트

GitHub - XionWCFM/Nextjs-docs-Korean-translation: 이 프로젝트는 Next.js의 beta docs를 한글로 번역합니다.

https://beta.nextjs.org/docs/api-reference/use-selected-layout-segments

위 문서에 대한 번역을 진행합니다.

번역시점은 2023-05-03로 공식문서의 추가적인 업데이트가 있을 수 있습니다.
번역기와 챗지피티에 의존해서 번역하고있습니다.
번역체를 자연스러운 어투로 옮기는 과정에서 오역이 발생할 수 있는 점 미리 알립니다.
한글로 번역하는 것이 더 어색한 단어의 경우 원문을 먼저 표기하겠습니다.
 
역자의 개인적인 의견에 대한 내용은

이 안에서 이루어집니다.

 

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>
  );
}

 

Good to know

• useSelectedLayoutSegments는 클라이언트 컴포넌트 훅이고, 레이아웃은 기본적으로 서버 컴포넌트이기 때문에, useSelectedLayoutSegments는 일반적으로 레이아웃으로 가져온 클라이언트 컴포넌트를 통해 호출됩니다.
• 반환된 세그먼트에는 라우트 그룹이 포함되는데, 이것은 UI에 포함되지 않는 것이 좋으므로, 대괄호([])로 시작하는 항목을 필터링하도록 배열 메서드인 filter()를 사용할 수 있습니다.

 

API 참조

const segments = useSelectedLayoutSegments();

 

매개변수

useSelectedLayoutSegments는 매개변수를 받지 않습니다.

 

반환값

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']

useSelectedLayoutSegment

usePathname