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

[#33] docs: linking-and-navigating 번역 #100

Merged
merged 2 commits into from
Aug 5, 2024
Merged

[#33] docs: linking-and-navigating 번역 #100

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1902d9e
[#33] docs: linking-and-navigating 번역
yoouyeon Aug 4, 2024
5d5f1d5
[#33] typo: 일관되지 않은 단어 번역 수정
yoouyeon Aug 4, 2024
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
63 changes: 31 additions & 32 deletions pages/docs/pages/building-your-application/routing/linking-and-navigating.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,11 @@ title: Linking and Navigating
description: Learn how navigation works in Next.js, and how to use the Link Component and `useRouter` hook.
---

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

# Linking and Navigating

The Next.js router allows you to do client-side route transitions between pages, similar to a single-page application.
Next.js 라우터를 사용하면 싱글 페이지 애플리케이션과 유사하게 페이지 간에 클라이언트 측 라우트 전환을 할 수 있습니다.

A React component called `Link` is provided to do this client-side route transition.
이 클라이언트 측 라우트 전환을 위해서 `Link`라는 React 컴포넌트가 제공됩니다.

```jsx
import Link from 'next/link'
Expand All @@ -33,17 +31,17 @@ function Home() {
export default Home
```

The example above uses multiple links. Each one maps a path (`href`) to a known page:
위의 예에서는 여러 개의 링크를 사용합니다. 각 링크는 알려진 페이지에 대한 경로(`href`)를 매핑합니다:

- `/` → `pages/index.js`
- `/about` → `pages/about.js`
- `/blog/hello-world` → `pages/blog/[slug].js`

Any `<Link />` in the viewport (initially or through scroll) will be prefetched by default (including the corresponding data) for pages using [Static Generation](/docs/pages/building-your-application/data-fetching/get-static-props). The corresponding data for [server-rendered](/docs/pages/building-your-application/data-fetching/get-server-side-props) routes is fetched _only when_ the `<Link />` is clicked.
[Static Generation](/docs/pages/building-your-application/data-fetching/get-static-props)을 사용하는 페이지에서 (초기 화면 또는 스크롤을 통해 나타나는) 뷰포트의 모든 `<Link />`는 기본적으로 (해당 데이터를 포함하여) 미리 가져와집니다. [서버에서 렌더링된](/docs/pages/building-your-application/data-fetching/get-server-side-props) 라우트에 해당하는 데이터는 `<Link />`가 클릭 되었을 때 _만_ 가져와집니다.

## Linking to dynamic paths

You can also use interpolation to create the path, which comes in handy for [dynamic route segments](/docs/pages/building-your-application/routing/dynamic-routes). For example, to show a list of posts which have been passed to the component as a prop:
보간을 이용해서 경로를 생성할 수 있는데, 이는 [동적 라우트 세그먼트](/docs/pages/building-your-application/routing/dynamic-routes)에 유용합니다. 예를 들어, 컴포넌트에 prop으로 전달된 게시글 목록을 표시하려면:

```jsx
import Link from 'next/link'
Expand All @@ -65,9 +63,9 @@ function Posts({ posts }) {
export default Posts
```

> [`encodeURIComponent`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) is used in the example to keep the path utf-8 compatible.
> 이 예제에서는 경로를 utf-8과 호환되도록 만들기 위해서 [`encodeURIComponent`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) 가 사용되었습니다.

Alternatively, using a URL Object:
또는, URL 객체를 사용할 수도 있습니다:

```jsx
import Link from 'next/link'
Expand All @@ -94,29 +92,29 @@ function Posts({ posts }) {
export default Posts
```

Now, instead of using interpolation to create the path, we use a URL object in `href` where:
이제 보간을 사용하여 경로를 만드는 대신 `href`에서 URL 객체를 사용합니다:

- `pathname` is the name of the page in the `pages` directory. `/blog/[slug]` in this case.
- `query` is an object with the dynamic segment. `slug` in this case.
- `pathname`은 `pages` 디렉터리에 있는 페이지의 이름입니다. 이 예제에서는 `/blog/[slug]`입니다.
- `query`는 동적 세그먼트가 있는 객체입니다. 이 예제에서는 `slug`입니다.

## Injecting the router

<details>
<summary>Examples</summary>
<summary>예제</summary>

- [Dynamic Routing](https://github.com/vercel/next.js/tree/canary/examples/dynamic-routing)
- [동적 라우팅](https://github.com/vercel/next.js/tree/canary/examples/dynamic-routing)

</details>

To access the [`router` object](/docs/pages/api-reference/functions/use-router#router-object) in a React component you can use [`useRouter`](/docs/pages/api-reference/functions/use-router) or [`withRouter`](/docs/pages/api-reference/functions/use-router#withrouter).
React 컴포넌트에서 [`router` 객체](/docs/pages/api-reference/functions/use-router#router-object)에 접근하기 위해서 [`useRouter`](/docs/pages/api-reference/functions/use-router) 또는 [`withRouter`](/docs/pages/api-reference/functions/use-router#withrouter)를 사용할 수 있습니다.

In general we recommend using [`useRouter`](/docs/pages/api-reference/functions/use-router).
일반적으로는 [`useRouter`](/docs/pages/api-reference/functions/use-router)를 사용하는 것을 권장합니다.

## Imperative Routing

[`next/link`](/docs/pages/api-reference/components/link) should be able to cover most of your routing needs, but you can also do client-side navigations without it, take a look at the [documentation for `next/router`](/docs/pages/api-reference/functions/use-router).
[`next/link`](/docs/pages/api-reference/components/link) 가 대부분의 라우팅 요구사항을 충족할 수 있지만, [`next/router` 문서](/docs/pages/api-reference/functions/use-router)를 참고해서 이것 없이도 클라이언트 측 탐색을 할 수 있습니다.

The following example shows how to do basic page navigations with [`useRouter`](/docs/pages/api-reference/functions/use-router):
아래의 예제는 [`useRouter`](/docs/pages/api-reference/functions/use-router)를 이용해서 기본적인 페이지 탐색 방법을 보여줍니다:

```jsx
import { useRouter } from 'next/router'
Expand All @@ -135,61 +133,62 @@ export default function ReadMore() {
## Shallow Routing

<details>
<summary>Examples</summary>
<summary>예제</summary>

- [Shallow Routing](https://github.com/vercel/next.js/tree/canary/examples/with-shallow-routing)
- [얕은 라우팅](https://github.com/vercel/next.js/tree/canary/examples/with-shallow-routing)

</details>

Shallow routing allows you to change the URL without running data fetching methods again, that includes [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props), [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props), and [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props).
얕은 라우팅을 사용하면 데이터 가져오기 메서드인 [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props), [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props), 그리고 [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props) 을 다시 실행하지 않고 URL을 변경할 수 있습니다.

You'll receive the updated `pathname` and the `query` via the [`router` object](/docs/pages/api-reference/functions/use-router#router-object) (added by [`useRouter`](/docs/pages/api-reference/functions/use-router) or [`withRouter`](/docs/pages/api-reference/functions/use-router#withrouter)), without losing state.
([`useRouter`](/docs/pages/api-reference/functions/use-router) 또는 [`withRouter`](/docs/pages/api-reference/functions/use-router#withrouter) 에서 추가된) [`router` 객체](/docs/pages/api-reference/functions/use-router#router-object)를 통해서 state를 잃지 않고 업데이트된 `pathname`을 받을 수 있습니다.

To enable shallow routing, set the `shallow` option to `true`. Consider the following example:
얕은 라우팅을 사용하기 위해서 `shallow` 옵션을 `true`로 설정합니다. 다음 예를 확인하세요:

```jsx
import { useEffect } from 'react'
import { useRouter } from 'next/router'

// Current URL is '/'
// 현재 URL은 '/'입니다.
function Page() {
const router = useRouter()

useEffect(() => {
// Always do navigations after the first render
// 항상 첫번째 랜더링 이후에 탐색을 수행합니다.
router.push('/?counter=10', undefined, { shallow: true })
}, [])

useEffect(() => {
// The counter changed!
// 카운터가 바뀌었습니다!
}, [router.query.counter])
}

export default Page
```

The URL will get updated to `/?counter=10` and the page won't get replaced, only the state of the route is changed.
URL은 `/?counter=10` 으로 업데이트되며 페이지는 교체되지 않고 라우트의 상태만 변경됩니다.

You can also watch for URL changes via [`componentDidUpdate`](https://react.dev/reference/react/Component#componentdidupdate) as shown below:
아래와 같이 [`componentDidUpdate`](https://react.dev/reference/react/Component#componentdidupdate)를 통해 URL 변경 사항을 확인할 수 있습니다:

```jsx
componentDidUpdate(prevProps) {
const { pathname, query } = this.props.router
// verify props have changed to avoid an infinite loop
// 무한 반복을 피하기 위해 props가 변경되었는지 확인합니다.
if (query.counter !== prevProps.router.query.counter) {
// fetch data based on the new query
// 새 쿼리를 기반으로 데이터를 가져옵니다.
}
}
```

### Caveats

Shallow routing **only** works for URL changes in the current page. For example, let's assume we have another page called `pages/about.js`, and you run this:
얕은 라우팅은 현재 페이지의 URL 변경에 대해서**만** 동작합니다. 예를 들어, `pages/about.js`라는 다른 페이지가 있고 이것을 실행한다고 가정해 보겠습니다:

```js
router.push('/?counter=10', '/about?counter=10', { shallow: true })
```

Since that's a new page, it'll unload the current page, load the new one and wait for data fetching even though we asked to do shallow routing.
새 페이지이므로 얕은 라우팅을 요청했음에도 불구하고 현재 페이지를 언로드하고 새 페이지를 로드한 후 데이터 가져오기를 기다립니다.

When shallow routing is used with middleware it will not ensure the new page matches the current page like previously done without middleware. This is due to middleware being able to rewrite dynamically and can't be verified client-side without a data fetch which is skipped with shallow, so a shallow route change must always be treated as shallow.
미들웨어와 함께 얕은 라우팅을 사용하면 이전에 미들웨어 없이 사용했던 것처럼 새로운 페이지가 현재 페이지와 일치하는지 보장할 수 없습니다. 이는 미들웨어가 동적으로 다시 작성할 수 있기 때문이며, 이를 클라이언트 측에서 얕은 라우팅으로 건너뛴 데이터 가져오기 없이는 확인할 수 없으므로 얕은 라우트 변경은 항상 얕은 것으로 처리되어야 합니다.
Loading