diff --git a/docs/02-app/02-api-reference/04-functions/use-selected-layout-segment.mdx b/docs/02-app/02-api-reference/04-functions/use-selected-layout-segment.mdx
index 6dee9ef5a..bc9a62ecb 100644
--- a/docs/02-app/02-api-reference/04-functions/use-selected-layout-segment.mdx
+++ b/docs/02-app/02-api-reference/04-functions/use-selected-layout-segment.mdx
@@ -1,11 +1,11 @@
---
title: useSelectedLayoutSegment
-description: API Reference for the useSelectedLayoutSegment hook.
+description: useSelectedLayoutSegment hook에 대한 API 참조입니다.
---
-`useSelectedLayoutSegment` is a **Client Component** hook that lets you read the active route segment **one level below** the Layout it is called from.
+`useSelectedLayoutSegment`는 **클라이언트 컴포넌트** hook으로 호출된 레이아웃보다 **한 단계 아래**에서 활성 경로 세그먼트를 읽을 수 있게 해줍니다.
-It is useful for navigation UI, such as tabs inside a parent layout that change style depending on the active child segment.
+활성 자식 세그먼트에 따라 스타일이 변경되는 상위 레이아웃 안에 있는 탭과 같은 내비게이션 UI에 유용합니다.
```tsx filename="app/example-client-component.tsx" switcher
'use client'
@@ -31,24 +31,25 @@ export default function ExampleClientComponent() {
}
```
-> **Good to know**:
+> **참고**:
>
-> - Since `useSelectedLayoutSegment` is a [Client Component](/docs/getting-started/react-essentials#client-components) hook, and Layouts are [Server Components](/docs/getting-started/react-essentials#server-components) by default, `useSelectedLayoutSegment` is usually called via a Client Component that is imported into a Layout.
-> - `useSelectedLayoutSegment` only returns the segment one level down. To return all active segments, see [`useSelectedLayoutSegments`](/docs/app/api-reference/functions/use-selected-layout-segments)
+> - `useSelectedLayoutSegment`는 [클라이언트 컴포넌트](/docs/getting-started/react-essentials#client-components) hook이고, 레이아웃은 기본적으로 [서버 컴포넌트](/docs/getting-started/react-essentials#server-components) 이기 때문에, 보통 레이아웃안에 가져와진 클라이언트 컴포넌트를 통해 `useSelectedLayoutSegment`가 호출됩니다.
-## Parameters
+> - `useSelectedLayoutSegment`는 오직 한 단계 아래 세그먼트만 반환합니다. 모든 활성 세그먼트를 반환하려면 [`useSelectedLayoutSegments`](/docs/app/api-reference/functions/use-selected-layout-segments)를 참조하세요.
+
+## 매개변수
```tsx
const segment = useSelectedLayoutSegment()
```
-`useSelectedLayoutSegment` does not take any parameters.
+`useSelectedLayoutSegment`는 어떠한 매개변수도 받지 않습니다.
-## Returns
+## 반환값
-`useSelectedLayoutSegment` returns a string of the active segment or `null` if one doesn't exist.
+`useSelectedLayoutSegment`는 활성 세그먼트의 문자열을 반환하거나 세그먼트가 없는 경우 `null`을 반환합니다.
-For example, given the Layouts and URLs below, the returned segment would be:
+예를 들어 아래 레이아웃과 URL들이 주어지면 반환되는 세그먼트는 다음과 같습니다.
| Layout | Visited URL | Returned Segment |
| ------------------------- | ------------------------------ | ---------------- |
@@ -59,11 +60,12 @@ For example, given the Layouts and URLs below, the returned segment would be:
| `app/dashboard/layout.js` | `/dashboard/analytics` | `'analytics'` |
| `app/dashboard/layout.js` | `/dashboard/analytics/monthly` | `'analytics'` |
-## Examples
+## 예제
-### Creating an active link component
+### 활성 링크 컴포넌트 만들기
-You can use `useSelectedLayoutSegment` to create an active link component that changes style depending on the active segment. For example, a featured posts list in the sidebar of a blog:
+`useSelectedLayoutSegment`를 사용하여 활성 세그먼트에 따라 스타일을 변경하는 활성 링크 컴포넌트를 만들 수 있습니다.
+예를 들어 블로그의 사이드바에 있는 추천 게시글 목록은 다음과 같습니다.
```tsx filename="app/blog/blog-nav-link.tsx" switcher
'use client'
@@ -71,7 +73,7 @@ You can use `useSelectedLayoutSegment` to create an active link component that c
import Link from 'next/link'
import { useSelectedLayoutSegment } from 'next/navigation'
-// This *client* component will be imported into a blog layout
+// 이 *클라이언트* 컴포넌트를 블로그 레이아웃안으로 가져옵니다.
export default function BlogNavLink({
slug,
children,
@@ -79,15 +81,14 @@ export default function BlogNavLink({
slug: string
children: React.ReactNode
}) {
- // Navigating to `/blog/hello-world` will return 'hello-world'
- // for the selected layout segment
+ // `/blog/hello-world`로 이동하면 선택한 레이아웃 세그먼트에 대한 'hello-world'이 반환됩니다.
const segment = useSelectedLayoutSegment()
const isActive = slug === segment
return (
{children}
@@ -102,17 +103,16 @@ export default function BlogNavLink({
import Link from 'next/link'
import { useSelectedLayoutSegment } from 'next/navigation'
-// This *client* component will be imported into a blog layout
+// 이 *클라이언트* 컴포넌트를 블로그 레이아웃안으로 가져옵니다.
export default function BlogNavLink({ slug, children }) {
- // Navigating to `/blog/hello-world` will return 'hello-world'
- // for the selected layout segment
+ // `/blog/hello-world`로 이동하면 선택한 레이아웃 세그먼트에 대한 'hello-world'이 반환됩니다.
const segment = useSelectedLayoutSegment()
const isActive = slug === segment
return (
{children}
@@ -122,7 +122,7 @@ export default function BlogNavLink({ slug, children }) {
```
```tsx filename="app/blog/layout.tsx" switcher
-// Import the Client Component into a parent Layout (Server Component)
+// 클라이언트 컴포넌트를 부모 레이아웃(서버 컴포넌트)로 가져옵니다.
import { BlogNavLink } from './blog-nav-link'
import getFeaturedPosts from './get-featured-posts'
@@ -146,7 +146,7 @@ export default async function Layout({
```
```jsx filename="app/blog/layout.js" switcher
-// Import the Client Component into a parent Layout (Server Component)
+// 클라이언트 컴포넌트를 부모 레이아웃(서버 컴포넌트)로 가져옵니다.
import { BlogNavLink } from './blog-nav-link'
import getFeaturedPosts from './get-featured-posts'