Skip to content

Commit

Permalink
[#28] docs: dynamic-routes 번역 (#48)
Browse files Browse the repository at this point in the history
  • Loading branch information
aken-you authored Jul 31, 2024
1 parent 04f86bb commit 5e5eeac
Showing 1 changed file with 9 additions and 11 deletions.
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

0 comments on commit 5e5eeac

Please sign in to comment.