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

[#28] docs: dynamic-routes 번역 #48

Merged
merged 1 commit into from
Jul 31, 2024
Merged

[#28] docs: dynamic-routes 번역 #48

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
20 changes: 9 additions & 11 deletions pages/docs/pages/building-your-application/routing/dynamic-routes.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,19 @@ related:
- pages/api-reference/functions/use-router
---

{/* TODO: 번역이 필요합니다. */}

# Dynamic Routes

When you don't know the exact segment names ahead of time and want to create routes from dynamic data, you can use Dynamic Segments that are filled in at request time or [prerendered](/docs/pages/building-your-application/data-fetching/get-static-paths) at build time.
정확한 세그먼트 이름을 미리 알 수 없고 동적 데이터로 라우트를 생성할 경우, 요청 시 또는 빌드 시 [미리 렌더링된](/docs/pages/building-your-application/data-fetching/get-static-paths) 동적 세그먼트를 사용할 수 있습니다.

## Convention

A Dynamic Segment can be created by wrapping a file or folder name in square brackets: `[segmentName]`. For example, `[id]` or `[slug]`.
동적 세그먼트는 파일 또는 폴더 이름을 대괄호로 감싸서 만들 수 있습니다: `[segmentName]`. 예를 들어, `[id]` or `[slug]`.

Dynamic Segments can be accessed from [`useRouter`](/docs/pages/api-reference/functions/use-router).
동적 세그먼트는 [`useRouter`](/docs/pages/api-reference/functions/use-router)에서 접근할 수 있습니다.

## Example

For example, a blog could include the following route `pages/blog/[slug].js` where `[slug]` is the Dynamic Segment for blog posts.
예를 들어, 블로그는 `[slug]`가 블로그 게시물의 동적 세그먼트인 `pages/blog/[slug].js` 라우트를 포함할 수 있습니다.

```jsx
import { useRouter } from 'next/router'
Expand All @@ -42,9 +40,9 @@ export default function Page() {

## Catch-all Segments

Dynamic Segments can be extended to **catch-all** subsequent segments by adding an ellipsis inside the brackets `[...segmentName]`.
동적 세그먼트는 대괄호 안에 줄임표를 추가하여(`[...segmentName]`) **모든 후속 세그먼트를 포함**하도록 확장할 수 있습니다.

For example, `pages/shop/[...slug].js` will match `/shop/clothes`, but also `/shop/clothes/tops`, `/shop/clothes/tops/t-shirts`, and so on.
예를 들어, `pages/shop/[...slug].js`는 `/shop/clothes`뿐만 아니라 `/shop/clothes/tops`, `/shop/clothes/tops/t-shirts` 등에도 일치합니다.

| Route | Example URL | `params` |
| ------------------------- | ------------- | --------------------------- |
Expand All @@ -54,11 +52,11 @@ For example, `pages/shop/[...slug].js` will match `/shop/clothes`, but also `/sh

## Optional Catch-all Segments

Catch-all Segments can be made **optional** by including the parameter in double square brackets: `[[...segmentName]]`.
Catch-all 세그먼트는 매개변수를 이중 대괄호에 포함하여 **선택 사항**으로 만들 수 있습니다: `[[...segmentName]]`.

For example, `pages/shop/[[...slug]].js` will **also** match `/shop`, in addition to `/shop/clothes`, `/shop/clothes/tops`, `/shop/clothes/tops/t-shirts`.
예를 들어, `pages/shop/[[...slug]].js`는 `/shop/clothes`, `/shop/clothes/tops`, `/shop/clothes/tops/t-shirts`뿐만 아니라 `/shop`과도 일치합니다.

The difference between **catch-all** and **optional catch-all** segments is that with optional, the route without the parameter is also matched (`/shop` in the example above).
**catch-all**과 **optional catch-all** 세그먼트의 차이점은 optional의 경우 매개변수 없이도 경로가 일치한다는 점입니다(위 예제의 `shop`).

| Route | Example URL | `params` |
| --------------------------- | ------------- | --------------------------- |
Expand Down
Loading