02-app > 01-building-your-application > 01-routing > 03-linking-and-navigating.mdx

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:
+라우트 사이를 이동하는 방법에는 두 가지가 있습니다.
 
-- [`<Link>` Component](#link-component)
-- [`useRouter` Hook](#userouter-hook)
+- [`<Link>` 컴포넌트](#link-컴포넌트) <!-- omit in toc -->
+- [`useRouter()` Hook](#userouter-hook)
 
-This page will go through how to use `<Link>`, `useRouter()`, and dive deeper into how navigation works.
+이 페이지에서는 `<Link>`, `useRouter()`를 사용하는 방법과 내비게이션이 작동하는 방식에 대해 자세히 알아보겠습니다.
 
-## `<Link>` Component
+## `<Link>` 컴포넌트
 
-`<Link>` is a React component that extends the HTML `<a>` element to provide [prefetching](#prefetching) and client-side navigation between routes. It is the primary way to navigate between routes in Next.js.
+`<Link>`는 HTML `<a>` 엘리먼트를 확장하여 [prefetching](#prefetching)과 라우트 사이의 클라이언트 측 네비게이션을 제공하는 리액트 컴포넌트입니다. Next.js에서 라우트 사이를 이동하는 주요한 방법입니다.
 
-To use `<Link>`, import it from `next/link`, and pass a `href` prop to the component:
+`<Link>`를 사용하려면 `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 `<Link>`. See the [API reference](/docs/app/api-reference/components/link) for more information.
+`<Link>`에 전달할 수 있는 선택적 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 `<Link>` 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 `<a>` tag.
+`<Link>`의 기본 동작은 [변경된 라우트 세그먼트의 맨 위로 스크롤](#focus-and-scroll-management)하는 것입니다. `href`에 `id`가 정의되어 있으면, 일반 `<a>` 태그와 비슷하게 특정 `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
 <Link href="/#hashid" scroll={false}>
@@ -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 `<Link>` component to navigate between routes unless you have a specific requirement for using `useRouter`.
+> **추천:** `useRouter`를 사용하라는 특별한 요구사항이 없는 한, 라우트 간에 이동할 때 `<Link>` 컴포넌트를 사용하는 것이 좋습니다.
 
-## How Navigation Works
+## 내비게이션의 작동 방식
 
-- A route transition is initiated using `<Link>` 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.
+- 라우트 전환은 `<Link>`를 사용하거나 `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 `<Link>` 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).
+기본적으로 `<Link>` 컴포넌트를 사용할 때 라우트는 뷰포트에 표시되자마자 미리 가져옵니다. 이는 페이지가 처음 로드되거나 스크롤을 통해 발생할 수 있습니다. 라우트는 [`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 `<Link>`.
+> - Prefetching은 프로덕션에서만 활성화됩니다.
+> - Prefetching은 `<Link>`에 `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는 라우트 변경 시 변경된 세그먼트에 포커스를 설정하고 스크롤을 뷰에 맞춥니다.