useSelectedLayoutSegment

useSelectedLayoutSegment는 Client Component 훅으로, 호출된 Layout 바로 아래 수준의 활성 경로 세그먼트를 읽을 수 있게 해줍니다.

탭과 같은 내비게이션 UI에서 유용하며, 부모 Layout 내부에서 활성 자식 세그먼트에 따라 스타일을 변경할 수 있습니다.

app/example-client-component.tsx

'use client'
 
import { useSelectedLayoutSegment } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const segment = useSelectedLayoutSegment()
 
  return <p>Active segment: {segment}</p>
}

app/example-client-component.js

'use client'
 
import { useSelectedLayoutSegment } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const segment = useSelectedLayoutSegment()
 
  return <p>Active segment: {segment}</p>
}

알아두면 좋은 점:

useSelectedLayoutSegment는 Client Component 훅이므로 Layout은 기본적으로 Server Components입니다. 따라서 useSelectedLayoutSegment는 일반적으로 Layout에 가져온 Client Component를 통해 호출됩니다.

useSelectedLayoutSegment는 한 단계 아래의 세그먼트만 반환합니다. 모든 활성 세그먼트를 반환하려면 useSelectedLayoutSegments를 참조하세요.

Parameters

const segment = useSelectedLayoutSegment(parallelRoutesKey?: string)

useSelectedLayoutSegment는 선택적으로 parallelRoutesKey를 받아, 해당 슬롯 내에서 활성 경로 세그먼트를 읽을 수 있게 해줍니다.

Returns

useSelectedLayoutSegment는 활성 세그먼트의 문자열을 반환하며, 존재하지 않으면 null을 반환합니다.

아래의 Layout 및 URL을 예로 들면, 반환되는 세그먼트는 다음과 같습니다:

Layout	방문한 URL	반환된 세그먼트
`app/layout.js`	`/`	`null`
`app/layout.js`	`/dashboard`	`'dashboard'`
`app/dashboard/layout.js`	`/dashboard`	`null`
`app/dashboard/layout.js`	`/dashboard/settings`	`'settings'`
`app/dashboard/layout.js`	`/dashboard/analytics`	`'analytics'`
`app/dashboard/layout.js`	`/dashboard/analytics/monthly`	`'analytics'`

Examples

활성 링크 컴포넌트 생성하기

useSelectedLayoutSegment를 사용하여 활성 세그먼트에 따라 스타일이 변경되는 활성 링크 컴포넌트를 생성할 수 있습니다. 예를 들어, 블로그의 사이드바에 있는 추천 게시물 목록:

app/blog/blog-nav-link.tsx

'use client'
 
import Link from 'next/link'
import { useSelectedLayoutSegment } from 'next/navigation'
 
// 이 *client* 컴포넌트는 블로그 레이아웃에 가져옵니다.
export default function BlogNavLink({
  slug,
  children,
}: {
  slug: string
  children: React.ReactNode
}) {
  // `/blog/hello-world`로 이동하면 선택된 레이아웃 세그먼트로 'hello-world'를 반환합니다.
  const segment = useSelectedLayoutSegment()
  const isActive = slug === segment
 
  return (
    <Link
      href={`/blog/${slug}`}
      // 링크가 활성화되었는지에 따라 스타일을 변경합니다.
      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
    >
      {children}
    </Link>
  )
}

app/blog/blog-nav-link.js

'use client'
 
import Link from 'next/link'
import { useSelectedLayoutSegment } from 'next/navigation'
 
// 이 *client* 컴포넌트는 블로그 레이아웃에 가져옵니다.
export default function BlogNavLink({ slug, children }) {
  // `/blog/hello-world`로 이동하면 선택된 레이아웃 세그먼트로 'hello-world'를 반환합니다.
  const segment = useSelectedLayoutSegment()
  const isActive = slug === segment
 
  return (
    <Link
      href={`/blog/${slug}`}
      // 링크가 활성화되었는지에 따라 스타일을 변경합니다.
      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
    >
      {children}
    </Link>
  )
}

app/blog/layout.tsx

// Client Component를 부모 Layout(Server Component)에 가져옵니다.
import { BlogNavLink } from './blog-nav-link'
import getFeaturedPosts from './get-featured-posts'
 
export default async function Layout({
  children,
}: {
  children: React.ReactNode
}) {
  const featuredPosts = await getFeaturedPosts()
  return (
    <div>
      {featuredPosts.map((post) => (
        <div key={post.id}>
          <BlogNavLink slug={post.slug}>{post.title}</BlogNavLink>
        </div>
      ))}
      <div>{children}</div>
    </div>
  )
}

app/blog/layout.js

// Client Component를 부모 Layout(Server Component)에 가져옵니다.
import { BlogNavLink } from './blog-nav-link'
import getFeaturedPosts from './get-featured-posts'
 
export default async function Layout({ children }) {
  const featuredPosts = await getFeaturedPosts()
  return (
    <div>
      {featuredPosts.map((post) => (
        <div key={post.id}>
          <BlogNavLink slug={post.slug}>{post.title}</BlogNavLink>
        </div>
      ))}
      <div>{children}</div>
    </div>
  )
}

Version History

Version	Changes
`v13.0.0`	`useSelectedLayoutSegment` introduced.

useSearchParams useSelectedLayoutSegments