Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

02-app > 02-api-reference > 04-functions > use-selected-layout-segments.mdx #319

Merged
merged 4 commits into from
Jul 11, 2023
Merged

02-app > 02-api-reference > 04-functions > use-selected-layout-segments.mdx #319

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
887f3fa
docs: pnpm prettier-fix, 번역 초안 작성 (Draft translation)
devmmin Jun 27, 2023
5e06804
fix: 잘못 삭제된 내용 추가
devmmin Jun 27, 2023
ec2ad8e
fix: 리뷰 단계 코멘트 반영
swatmj Jul 8, 2023
c44e51c
fix: 리뷰 단계 코멘트 반영
devmmin Jul 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 12 additions & 11 deletions docs/02-app/02-api-reference/04-functions/use-selected-layout-segments.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
title: useSelectedLayoutSegments
description: API Reference for the useSelectedLayoutSegments hook.
description: useSelectedLayoutSegments hook을 사용하는 API 레퍼런스입니다.
---

`useSelectedLayoutSegments` is a **Client Component** hook that lets you read the active route segments **below** the Layout it is called from.
`useSelectedLayoutSegments`는 호출한 레이아웃 **아래**에 있는 활성 라우트 세그먼트를 읽을 수 있게 해주는 **클라이언트 컴포넌트** hook입니다.

It is useful for creating UI in parent Layouts that need knowledge of active child segments such as breadcrumbs.
이는 브레드크럼과 같이 활성 자식 세그먼트의 정보를 필요로 하는 부모 레이아웃에서 UI를 만들 때 유용합니다.

```tsx filename="app/example-client-component.tsx" switcher
'use client'
Expand Down Expand Up @@ -43,26 +43,27 @@ export default function ExampleClientComponent() {
}
```

> **Good to know**:
> **참고**:
>
> - Since `useSelectedLayoutSegments` 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, `useSelectedLayoutSegments` is usually called via a Client Component that is imported into a Layout.
> - The returned segments include [Route Groups](/docs/app/building-your-application/routing/route-groups), which you might not want to be included in your UI. You can use the `filter()` array method to remove items that start with a bracket.
> - `useSelectedLayoutSegments`는 [클라이언트 컴포넌트](/docs/getting-started/react-essentials#client-components) hook이며, 레이아웃은 기본적으로 [서버 컴포넌트](/docs/getting-started/react-essentials#server-components)입니다. 따라서 `useSelectedLayoutSegments`는 일반적으로 레이아웃으로 가져온 클라이언트 컴포넌트를 통해 호출됩니다.

## Parameters
> - 반환된 세그먼트에는 [Route Groups](/docs/app/building-your-application/routing/route-groups)가 포함될 수 있으며 UI에 포함시키지 않으려는 경우 `filter()` 배열 메소드를 사용하여 대괄호로 시작하는 항목을 제거할 수 있습니다.

## 매개변수

```tsx
const segments = useSelectedLayoutSegments()
```

`useSelectedLayoutSegments` does not take any parameters.
`useSelectedLayoutSegments`는 어떤 매개변수도 받지 않습니다.

## Returns

`useSelectedLayoutSegments` returns an array of strings containing the active segments one level down from the layout the hook was called from. Or an empty array if none exist.
`useSelectedLayoutSegments`는 호출된 hook에서 한 단계 아래에 있는 레이아웃의 활성 세그먼트를 포함하는 문자열 배열을 반환합니다. 세그먼트가 없으면 빈 배열을 반환합니다.

For example, given the Layouts and URLs below, the returned segments would be:
다음과 같은 레이아웃 및 URL이 주어졌을 때, 반환되는 세그먼트는 다음과 같습니다.

| Layout | Visited URL | Returned Segments |
| 레이아웃 | 방문한 URL | 반환되는 세그먼트 |
| ------------------------- | --------------------- | --------------------------- |
| `app/layout.js` | `/` | `[]` |
| `app/layout.js` | `/dashboard` | `['dashboard']` |
Expand Down