diff --git a/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx b/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx index 4f0215d20..d6d803641 100644 --- a/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx +++ b/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx @@ -1,22 +1,22 @@ --- -title: Linking and Navigating -description: Learn how navigation works in Next.js, and how to use the Link Component and `useRouter` hook. +title: Linking과 Navigating +description: Next.js에서 내비게이션이 작동하는 방식과 Link Component와 `useRouter` hook을 사용하는 방법을 배워보세요. --- -The Next.js router uses [server-centric routing](/docs/app/building-your-application/routing#server-centric-routing-with-client-side-navigation) with [client-side navigation](#how-navigation-works). It supports [instant loading states](/docs/app/building-your-application/routing/loading-ui-and-streaming) and [concurrent rendering](https://react.dev/reference/react/startTransition). This means navigation maintains client-side state, avoids expensive re-renders, is interruptible, and doesn't cause race conditions. +Next.js 라우터는 [서버 중심 라우팅](/docs/app/building-your-application/routing#server-centric-routing-with-client-side-navigation)과 [클라이언트 사이드 내비게이션](#how-navigation-works)을 사용합니다. 이는 [즉각적인 로딩 상태](/docs/app/building-your-application/routing/loading-ui-and-streaming)와 [동시 렌더링](https://react.dev/reference/react/startTransition)을 지원합니다. 즉, 내비게이션은 클라이언트 측 상태를 유지하고 비용이 많이 드는 리렌더링을 피하고 중단 가능하며 경쟁 상태를 일으키지 않습니다. -There are two ways to navigate between routes: +라우트 사이를 이동하는 방법에는 두 가지가 있습니다. -- [`` Component](#link-component) -- [`useRouter` Hook](#userouter-hook) +- [`` 컴포넌트](#link-컴포넌트) +- [`useRouter()` Hook](#userouter-hook) -This page will go through how to use ``, `useRouter()`, and dive deeper into how navigation works. +이 페이지에서는 ``, `useRouter()`를 사용하는 방법과 내비게이션이 작동하는 방식에 대해 자세히 알아보겠습니다. -## `` Component +## `` 컴포넌트 -`` is a React component that extends the HTML `` element to provide [prefetching](#prefetching) and client-side navigation between routes. It is the primary way to navigate between routes in Next.js. +``는 HTML `` 엘리먼트를 확장하여 [prefetching](#prefetching)과 라우트 사이의 클라이언트 측 네비게이션을 제공하는 리액트 컴포넌트입니다. Next.js에서 라우트 사이를 이동하는 주요한 방법입니다. -To use ``, import it from `next/link`, and pass a `href` prop to the component: +``를 사용하려면 `next/link`를 import하고, `href` props를 컴포넌트에 전달하세요: ```tsx filename="app/page.tsx" switcher import Link from 'next/link' @@ -34,13 +34,13 @@ export default function Page() { } ``` -There are optional props you can pass to ``. See the [API reference](/docs/app/api-reference/components/link) for more information. +``에 전달할 수 있는 선택적 props가 있습니다. 더 많은 정보는 [API 레퍼런스](/docs/app/api-reference/components/link)를 참고하세요. -## Examples +## 예시 -### Linking to Dynamic Segments +### 동적 세그먼트에 링크 걸기 -When linking to [dynamic segments](/docs/app/building-your-application/routing/dynamic-routes), you can use [template literals and interpolation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to generate a list of links. For example, to generate a list of blog posts: +[동적 세그먼트](/docs/app/building-your-application/routing/dynamic-routes)에 링크를 걸 때, [템플릿 리터럴과 삽입법](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals)을 사용하여 링크 목록을 생성할 수 있습니다. 예를 들어, 블로그 포스트 목록을 생성하려면: ```jsx filename="app/blog/PostList.js" import Link from 'next/link' @@ -58,9 +58,9 @@ export default function PostList({ posts }) { } ``` -### Checking Active Links +### 활성 링크 확인하기 -You can use [`usePathname()`](/docs/app/api-reference/functions/use-pathname) to determine if a link is active. For example, to add a class to the active link, you can check if the current `pathname` matches the `href` of the link: +링크가 활성화되어 있는지 확인하기 위해 [`usePathname()`](/docs/app/api-reference/functions/use-pathname)을 사용할 수 있습니다. 예를 들어 현재 `pathname`이 링크의 `href`와 일치하는지 확인하여 활성 링크에 클래스를 추가할 수 있습니다: ```jsx filename="app/ui/Navigation.js" 'use client' @@ -91,11 +91,11 @@ export function Navigation({ navLinks }) { } ``` -### Scrolling to an `id` +### `id`로 스크롤하기 -The default behavior of `` is to [scroll to the top of the route segment that has changed](#focus-and-scroll-management). When there is an `id` defined in `href`, it will scroll to the specific `id`, similarly to a normal `` tag. +``의 기본 동작은 [변경된 라우트 세그먼트의 맨 위로 스크롤](#focus-and-scroll-management)하는 것입니다. `href`에 `id`가 정의되어 있으면, 일반 `` 태그와 비슷하게 특정 `id`로 스크롤합니다. -To prevent scrolling to the top of the route segment, set `scroll={false}` and add a hashed `id` to `href`: +라우트 세그먼트의 맨 위로 스크롤하는 것을 방지하려면 `scroll={false}`를 설정하고 `href`에 해시된 `id`를 추가하세요. ```jsx @@ -105,9 +105,9 @@ To prevent scrolling to the top of the route segment, set `scroll={false}` and a ## `useRouter()` Hook -The `useRouter` hook allows you to programmatically change routes inside [Client Components](/docs/getting-started/react-essentials). +`useRouter` hook은 [클라이언트 컴포넌트](/docs/getting-started/react-essentials) 내부에서 라우트를 프로그래밍 방식으로 변경할 수 있게 합니다. -To use `useRouter`, import it from `next/navigation`, and call the hook inside your Client Component: +`useRouter`를 사용하려면 `next/navigation`에서 import하고 클라이언트 컴포넌트 내부에서 Hook을 호출하세요: ```jsx filename="app/page.js" 'use client' @@ -125,70 +125,68 @@ export default function Page() { } ``` -The `useRouter` provides methods such as `push()`, `refresh()`, and more. See the [API reference](/docs/app/api-reference/functions/use-router) for more information. +`useRouter`는 `push()`, `refresh()` 등의 메서드를 제공합니다. 더 많은 정보는 [API 레퍼런스](/docs/app/api-reference/functions/use-router)를 참고하세요. -> **Recommendation:** Use the `` component to navigate between routes unless you have a specific requirement for using `useRouter`. +> **추천:** `useRouter`를 사용하라는 특별한 요구사항이 없는 한, 라우트 간에 이동할 때 `` 컴포넌트를 사용하는 것이 좋습니다. -## How Navigation Works +## 내비게이션의 작동 방식 -- A route transition is initiated using `` or calling `router.push()`. -- The router updates the URL in the browser's address bar. -- The router avoids unnecessary work by re-using segments that haven't changed (e.g. shared layouts) from the [client-side cache](#client-side-caching-of-rendered-server-components). This is also referred to as [partial rendering](/docs/app/building-your-application/routing#partial-rendering). -- If the [conditions of soft navigation](#conditions-for-soft-navigation) are met, the router fetches the new segment from the cache rather than the server. If not, the router performs a [hard navigation](#hard-navigation) and fetches the Server Component payload from the server. -- If created, [loading UI](/docs/app/building-your-application/routing/loading-ui-and-streaming) is shown from the server while the payload is being fetched. -- The router uses the cached or fresh payload to render the new segments on the client. +- 라우트 전환은 ``를 사용하거나 `router.push()`를 호출하여 시작됩니다. +- 라우터는 브라우저의 주소 표시줄에 URL을 업데이트합니다. +- 라우터는 [클라이언트 측 캐시](#client-side-caching-of-rendered-server-components)에서 변경되지 않은 세그먼트(예: 공유된 레이아웃)를 재사용하여 불필요한 작업을 피합니다. 이것은 [부분 렌더링](/docs/app/building-your-application/routing#partial-rendering)이라고도 합니다. +- [소프트 내비게이션의 조건](#conditions-for-soft-navigation)이 충족되면, 라우터는 서버가 아닌 캐시에서 새로운 세그먼트를 가져옵니다. 그렇지 않으면 라우터는 [하드 내비게이션](#hard-navigation)을 수행하고 서버로부터 서버 컴포넌트 페이로드를 가져옵니다. +- 생성된 경우, [로딩 UI](/docs/app/building-your-application/routing/loading-ui-and-streaming)는 페이로드가 fetched되는 동안 서버로부터 표시됩니다. +- 라우터는 캐시되거나 신선한 페이로드를 사용하여 클라이언트에서 새로운 세그먼트를 렌더링 합니다. -### Client-side Caching of Rendered Server Components +### 렌더링 된 서버 컴포넌트의 클라이언트 측 캐시 -> **Good to know**: This client-side cache is different from the server-side [Next.js HTTP cache](/docs/app/building-your-application/data-fetching#caching-data). +> **참고:** 클라이언트 측 캐시는 서버 측 [Next.js HTTP 캐시](/docs/app/building-your-application/data-fetching#caching-data)와 다릅니다. -The new router has an **in-memory client-side cache** that stores the **rendered result** of Server Components (payload). The cache is split by route segments which allows invalidation at any level and ensures consistency across concurrent renders. +새로운 라우터는 서버 컴포넌트의 **렌더링 된 결과**를 저장하는 **인메모리 클라이언트 측 캐시**를 가지고 있습니다. 캐시는 라우트 세그먼트로 분할되어 어느 수준에서든 무효화 할 수 있으며, 동시 렌더링 간 일관성을 보장합니다. -As users navigate around the app, the router will store the payload of previously fetched segments **and** [prefetched](#prefetching) segments in the cache. +사용자가 앱 내에서 이동을 하면, 라우터는 이전에 가져온 세그먼트의 페이로드 **그리고** [prefetched](#prefetching) 세그먼트를 캐시에 저장합니다. -This means, for certain cases, the router can re-use the cache instead of making a new request to the server. This improves performance by avoiding re-fetching data and re-rendering components unnecessarily. +이는 특정 경우에 라우터가 서버에 새 요청을 보내지 않고 캐시를 재사용할 수 있음을 의미합니다. 이는 데이터를 다시 가져오고 컴포넌트를 불필요하게 다시 렌더링 하는 것을 피함으로써 성능을 향상시킵니다. -### Invalidating the Cache +### 캐시 무효로 하기 -[Server Actions](/docs/app/building-your-application/data-fetching/server-actions) can be used to revalidate data on-demand by path ([`revalidatePath`](/docs/app/api-reference/functions/revalidatePath)) or by cache tag ([`revalidateTag`](/docs/app/api-reference/functions/revalidateTag)). +[서버 액션](/docs/app/building-your-application/data-fetching/server-actions)은 경로([`revalidatePath`](/docs/app/api-reference/functions/revalidatePath)) 또는 캐시 태그([`revalidateTag`](/docs/app/api-reference/functions/revalidateTag))로 데이터를 필요에 따라 다시 유효성 검사하는 데 사용될 수 있습니다. ### Prefetching -Prefetching is a way to preload a route in the background before it's visited. The rendered result of prefetched routes is added to the router's client-side cache. This makes navigating to a prefetched route near-instant. +Prefetching은 라우트를 방문하기 전에 백그라운드에서 라우트를 미리 로드하는 방법입니다. 미리 가져온 라우트의 렌더링 결과는 라우터의 클라이언트 측 캐시에 추가됩니다. 이렇게 하면 미리 가져온 라우트로 이동하는 것이 거의 즉시 가능합니다. -By default, routes are prefetched as they become visible in the viewport when using the `` component. This can happen when the page first loads or through scrolling. Routes can also be programmatically prefetched using the `prefetch` method of the [`useRouter()` hook](/docs/app/api-reference/functions/use-router#userouter). +기본적으로 `` 컴포넌트를 사용할 때 라우트는 뷰포트에 표시되자마자 미리 가져옵니다. 이는 페이지가 처음 로드되거나 스크롤을 통해 발생할 수 있습니다. 라우트는 [`useRouter()` hook](/docs/app/api-reference/functions/use-router#userouter)의 `prefetch` 메서드를 사용하여 프로그래밍 방식으로 미리 가져올 수 있습니다. -**Static and Dynamic Routes**: +**정적 및 동적 라우트**: -- If the route is static, all the Server Component payloads for the route segments will be prefetched. -- If the route is dynamic, the payload from the first shared layout down until the first `loading.js` file is prefetched. This reduces the cost of prefetching the whole route dynamically and allows [instant loading states](/docs/app/building-your-application/routing/loading-ui-and-streaming#instant-loading-states) for dynamic routes. +- 라우트가 정적이면, 라우트 세그먼트의 모든 서버 컴포넌트 페이로드가 prefetch됩니다. +- 라우트가 동적이면, 첫 번째 공유 레이아웃에서 첫 번째 `loading.js` 파일까지의 페이로드가 prefetch됩니다. 이렇게 하면 라우트 전체를 동적으로 미리 가져오는 비용이 줄어들며, 동적 라우트에 대한 [즉시 로딩 상태](/docs/app/building-your-application/routing/loading-ui-and-streaming#instant-loading-states)를 허용합니다. -> **Good to know**: +> **참고**: > -> - Prefetching is only enabled in production. -> - Prefetching can be disabled by passing `prefetch={false}` to ``. +> - Prefetching은 프로덕션에서만 활성화됩니다. +> - Prefetching은 ``에 `prefetch={false}`를 전달하여 비활성화할 수 있습니다. -### Soft Navigation +### 소프트 내비게이션 -On navigation, the cache for changed segments is reused (if it exists), and no new requests are made to the server for data. +내비게이션을 할 때 변경된 세그먼트의 캐시가 재사용되며 데이터를 위해 서버에 새로운 요청이 전송되지 않습니다. -#### Conditions for Soft Navigation +### 소프트 내비게이션의 조건 -On navigation, Next.js will use soft navigation if the route you are navigating to has been [**prefetched**](#prefetching), and either doesn't include [dynamic segments](/docs/app/building-your-application/routing/dynamic-routes) **or** has the same dynamic parameters as the current route. +내비게이션을 할 때 Next.js는 내비게이션할 라우트가 [**prefetched**](#prefetching)되었고, [동적 세그먼트](/docs/app/building-your-application/routing/dynamic-routes)를 포함하지 않**거나** 현재 라우트와 동일한 동적 파라미터를 가지고 있으면 소프트 내비게이션을 사용합니다. -For example, consider the following route that includes a dynamic `[team]` segment: `/dashboard/[team]/*`. The cached segments below `/dashboard/[team]/*` will only be invalidated when the `[team]` parameter changes. +- `/dashboard/team-red/*`에서 `/dashboard/team-red/*`로 내비게이션될 때는 소프트 내비게이션을 사용합니다. +- `/dashboard/team-red/*`에서 `/dashboard/team-blue/*`로 내비게이션될 때는 하드 내비게이션을 사용합니다. -- Navigating from `/dashboard/team-red/*` to `/dashboard/team-red/*` will be a soft navigation. -- Navigating from `/dashboard/team-red/*` to `/dashboard/team-blue/*` will be a hard navigation. +### 하드 내비게이션 -### Hard Navigation +내비게이션을 할 때 캐시가 무효로 되고 서버가 데이터를 다시 가져오고 변경된 세그먼트를 다시 렌더링 합니다. -On navigation, the cache is invalidated and the server refetches data and re-renders the changed segments. +### 뒤로 가기/앞으로 가기 내비게이션 -### Back/Forward Navigation +뒤로 가기/앞으로 가기 내비게이션([popstate event](https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event))은 소프트 내비게이션 동작을 가집니다. 이는 클라이언트 측 캐시가 재사용되고 내비게이션이 거의 즉시 진행된다는 것을 의미합니다. -Back and forward navigation ([popstate event](https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event)) has a soft navigation behavior. This means, the client-side cache is re-used and navigation is near-instant. +### 포커스와 스크롤 관리 -### Focus and Scroll Management - -By default, Next.js will set focus and scroll into view the segment that's changed on navigation. +기본적으로 Next.js는 라우트 변경 시 변경된 세그먼트에 포커스를 설정하고 스크롤을 뷰에 맞춥니다.