02-app > 02-api-reference > 04-functions > use-router.mdx #272

synuns · 2023-06-26T12:38:56Z

기여자용

문서 개선

PR을 열기 전에 pnpm prettier-fix를 실행하여 서식 문제를 해결합니다. - 문서 기여 가이드를 읽고 문서 지침을 따르는지 확인하세요: https://github.com/Nextjs-kr/Nextjs.ko/blob/main/packages/next/README.md

Progress

pnpm prettier-fix
번역 초안 작성 (Draft translation)
공통 스타일 가이드 확인 (Check the common style guide)
모범사례 확인 (Check best practices)
용어 확인 (Check the term)
맞춤법 검사 (Spelling check)
리뷰 반영 (Resolve reviews)

chaejunlee

수고하셨습니다! 커멘트 확인해주시고 비슷한 언급한 내용은 문서 전체에 걸쳐 수정 부탁드립니다!

chaejunlee · 2023-06-29T16:10:53Z

docs/02-app/02-api-reference/04-functions/use-router.mdx

@@ -1,11 +1,11 @@
 ---
 title: useRouter
-description: API reference for the useRouter hook.
+description: useRouter 훅에 대한 API 참조입니다.


Suggested change

description: useRouter 훅에 대한 API 참조입니다.

description: useRouter 훅에 대한 API 레퍼런스입니다.

chaejunlee · 2023-06-29T16:23:46Z

docs/02-app/02-api-reference/04-functions/use-router.mdx

+- `router.push(href: string)`: 경로를 제공받아 클라이언트 사이드 탐색을 수행합니다. 새로운 항목을 [브라우저 방문 기록](https://developer.mozilla.org/en-US/docs/Web/API/History_API)에 추가합니다.
+- `router.replace(href: string)`: [브라우저 방문 기록 스택](https://developer.mozilla.org/en-US/docs/Web/API/History_API)에 새로운 항목을 추가하지 않고 경로를 제공받는 클라이언트 사이드 탐색을 수행합니다.
+- `router.refresh()`: 현재 경로를 새로고침합니다. 서버로 새로운 요청을 만들면서, 데이터 요청들을 refetch하고 서버 컴포넌트를 리렌더링합니다. 클라이언트는 영향 받지 않는 클라이언트 사이드 리액트(예: `useState`)나 브라우저 상태(예: 스크롤 위치)를 잃지 않고 업데이트된 리액트 서버 컴포넌트 페이로드를 병합합니다.
+- `router.prefetch(href: string)`: 더 빠른 클라이언트 사이드 전환을 위해 제공된 경로를 [prefetch](/docs/app/building-your-application/routing/linking-and-navigating#prefetching)합니다.
+- `router.back()`: [soft navigation](/docs/app/building-your-application/routing/linking-and-navigating#soft-navigation)을 사용하여 브라우저 탐색기록 스택에서 이전 경로로 이동합니다.
+- `router.forward()`: [soft navigation](/docs/app/building-your-application/routing/linking-and-navigating#soft-navigation)을 사용하여 브라우저 탐색기록 스택에서 다음 페이지로 이동합니다.


Suggested change

- `router.push(href: string)`: 경로를 제공받아 클라이언트 사이드 탐색을 수행합니다. 새로운 항목을 [브라우저 방문 기록](https://developer.mozilla.org/en-US/docs/Web/API/History_API)에 추가합니다.

- `router.replace(href: string)`: [브라우저 방문 기록 스택](https://developer.mozilla.org/en-US/docs/Web/API/History_API)에 새로운 항목을 추가하지 않고 경로를 제공받는 클라이언트 사이드 탐색을 수행합니다.

- `router.refresh()`: 현재 경로를 새로고침합니다. 서버로 새로운 요청을 만들면서, 데이터 요청들을 refetch하고 서버 컴포넌트를 리렌더링합니다. 클라이언트는 영향 받지 않는 클라이언트 사이드 리액트(예: `useState`)나 브라우저 상태(예: 스크롤 위치)를 잃지 않고 업데이트된 리액트 서버 컴포넌트 페이로드를 병합합니다.

- `router.prefetch(href: string)`: 더 빠른 클라이언트 사이드 전환을 위해 제공된 경로를 [prefetch](/docs/app/building-your-application/routing/linking-and-navigating#prefetching)합니다.

- `router.back()`: [soft navigation](/docs/app/building-your-application/routing/linking-and-navigating#soft-navigation)을 사용하여 브라우저 탐색기록 스택에서 이전 경로로 이동합니다.

- `router.forward()`: [soft navigation](/docs/app/building-your-application/routing/linking-and-navigating#soft-navigation)을 사용하여 브라우저 탐색기록 스택에서 다음 페이지로 이동합니다.

- `router.push(href: string)`: 제공 받은 경로로 클라이언트 사이드 이동을 수행합니다. 새로운 항목을 [브라우저 방문 기록](https://developer.mozilla.org/en-US/docs/Web/API/History_API) 스택에 추가합니다.

- `router.replace(href: string)`: [브라우저 방문 기록 스택](https://developer.mozilla.org/en-US/docs/Web/API/History_API)에 새로운 항목을 추가하지 않고 제공 받은 경로로 클라이언트 사이드 이동을 수행합니다.

- `router.refresh()`: 현재 경로를 새로고침합니다. 서버로 새로운 요청을 만들면서, 데이터 요청들을 re-fetch하고 서버 컴포넌트를 리렌더링합니다. 클라이언트는 변경되지 않은 클라이언트 사이드 리액트(예: `useState`)나 브라우저 상태(예: 스크롤 위치)를 잃지 않고 업데이트된 리액트 서버 컴포넌트 페이로드를 병합합니다.

- `router.prefetch(href: string)`: 더 빠른 클라이언트 사이드 전환을 위해 제공 받은 경로를 [prefetch](/docs/app/building-your-application/routing/linking-and-navigating#prefetching)합니다.

- `router.back()`: [soft navigation](/docs/app/building-your-application/routing/linking-and-navigating#soft-navigation)을 사용하여 브라우저 방문 기록 스택에서 이전 경로로 이동합니다.

- `router.forward()`: [soft navigation](/docs/app/building-your-application/routing/linking-and-navigating#soft-navigation)을 사용하여 브라우저 방문 기록 스택에서 다음 페이지로 이동합니다.

용어 통일 및 원문 영어 형태 그대로 살렸습니다. 다른 부분도 위와 같이 다시 확인 부탁 드립니다!

chaejunlee · 2023-06-29T16:30:00Z

docs/02-app/02-api-reference/04-functions/use-router.mdx

+> - `push()`와 `replace()` 메소드는 새로운 경로가 prefetch되었으며 [동적 segments](/docs/app/building-your-application/routing/dynamic-routes)를 포함하지 않거나 현재 경로와 동적 매개변수를 가진 경우 [soft navigation](/docs/app/building-your-application/routing/linking-and-navigating#soft-navigation)을 수행합니다.
+> - `next/link`는 경로가 viewport에 표시되면서 자동으로 경로를 prefetch합니다.
+> - fetch 요청이 캐시되면 `refresh()`는 동일한 결과를 다시 생성할 수 있습니다.`cookies`와 `headers` 같은 다른 동적 함수들도 response를 변경할 수 있습니다.
+>
+> **`pages` 폴더에서 이전하기:**


Suggested change

> - `push()`와 `replace()` 메소드는 새로운 경로가 prefetch되었으며 [동적 segments](/docs/app/building-your-application/routing/dynamic-routes)를 포함하지 않거나 현재 경로와 동적 매개변수를 가진 경우 [soft navigation](/docs/app/building-your-application/routing/linking-and-navigating#soft-navigation)을 수행합니다.

> - `next/link`는 경로가 viewport에 표시되면서 자동으로 경로를 prefetch합니다.

> - fetch 요청이 캐시되면 `refresh()`는 동일한 결과를 다시 생성할 수 있습니다.`cookies`와 `headers` 같은 다른 동적 함수들도 response를 변경할 수 있습니다.

>

> **`pages` 폴더에서 이전하기:**

> - `push()`와 `replace()` 메소드는 새로운 경로가 prefetch되었으며 [동적 segments](/docs/app/building-your-application/routing/dynamic-routes)를 포함하지 않거나 현재 경로와 동일한 동적 매개변수를 가진 경우 [soft navigation](/docs/app/building-your-application/routing/linking-and-navigating#soft-navigation)을 수행합니다.

> - `next/link`는 경로가 viewport에 표시될 때 자동으로 경로를 prefetch합니다.

> - fetch 요청이 캐시되면 `refresh()`는 동일한 결과를 다시 생성할 수 있습니다.`cookies`와 `headers` 같은 다른 동적 함수들도 response를 변경할 수 있습니다.

>

> **`pages` 디렉토리에서 이전하기:**

chaejunlee · 2023-06-29T16:33:22Z

docs/02-app/02-api-reference/04-functions/use-router.mdx

    // ...
  }, [pathname, searchParams])

  return null
 }
 ```

-Which can be imported into a layout.
+레이아웃에서 import될 수 있습니다.


Suggested change

레이아웃에서 import될 수 있습니다.

레이아웃으로 import할 수 있습니다.

chaejunlee · 2023-06-29T16:43:49Z

docs/02-app/02-api-reference/04-functions/use-router.mdx

@@ -111,8 +111,8 @@ export default function Layout({ children }) {
 }
 ```

-> **Good to know**: `<NavigationEvents>` is wrapped in a [`Suspense` boundary](/docs/app/building-your-application/routing/loading-ui-and-streaming#example) because[`useSearchParams()`](/docs/app/api-reference/functions/use-search-params) causes client-side rendering up to the closest `Suspense` boundary during [static rendering](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#static-rendering-default). [Learn more](/docs/app/api-reference/functions/use-search-params#behavior).
+> **참고**: [`useSearchParams()`](/docs/app/api-reference/functions/use-search-params)는 [정적 렌더링](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#static-rendering-default)중 클라이언트 사이드 렌더링을 [`Suspense` 바운더리](/docs/app/building-your-application/routing/loading-ui-and-streaming#example)까지 발생시키기 때문에 `<NavigationEvents>`는 `Suspense` 바운더리로 감싸집니다. [더 배우기](/docs/app/api-reference/functions/use-search-params#behavior)


Suggested change

> **참고**: [`useSearchParams()`](/docs/app/api-reference/functions/use-search-params)는 [정적 렌더링](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#static-rendering-default)중 클라이언트 사이드 렌더링을 [`Suspense` 바운더리](/docs/app/building-your-application/routing/loading-ui-and-streaming#example)까지 발생시키기 때문에 `<NavigationEvents>`는 `Suspense` 바운더리로 감싸집니다. [더 배우기](/docs/app/api-reference/functions/use-search-params#behavior)

> **참고**: [`useSearchParams()`](/docs/app/api-reference/functions/use-search-params)는 가장 가까운 [`Suspense` 바운더리](/docs/app/building-your-application/routing/loading-ui-and-streaming#example)까지 [정적 렌더링](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#static-rendering-default)을 하는 중에 클라이언트 사이드 렌더링을 발생시키기 때문에 `<NavigationEvents>`는 `Suspense` 바운더리로 감쌉니다. [더 배우기](/docs/app/api-reference/functions/use-search-params#behavior)

learn more를 더 배우기로 직역하기는 했으나, 한글 문서에서는 더 보기 혹은 더 알아보기로 사용하고는 하는데 어떻게 생각하시는지 해당 문서에서는 어떻게 통일하고있는지 의견을 여쭤보고 싶습니다

~는 ~을 ~하다. 의 순서로 해석하는 것이 자연스러울 것이라고 생각하는데 이에 대해 의견을 여쭤보고 싶습니다.

learn more를 더 배우기로 직역하기는 했으나, 한글 문서에서는 더 보기 혹은 더 알아보기로 사용하고는 하는데 어떻게 생각하시는지 해당 문서에서는 어떻게 통일하고있는지 의견을 여쭤보고 싶습니다

1번 의견이 정확히 어떤 건지 이해가 잘 되지 않는데 혹시 조금 더 자세하게 말씀해주실 수 있나요?

2번은 "더 알아보기"가 좋을 것 같습니다.

useSearchParams()는 정적 렌더링을 하는 중에 가장 가까운 Suspense 바운더리까지 클라이언트 사이드 렌더링을 발생시키기 때문에 <NavigationEvents>는 Suspense 바운더리로 감쌉니다.

다시보니 질문을 잘못남겼군요! 위처럼 ~에와 ~까지의 순서를 바꾸면 훨씬 자연스러울 것 같습니다.

chaejunlee · 2023-06-29T16:44:45Z

docs/02-app/02-api-reference/04-functions/use-router.mdx

+| Version   | Changes                                             |
+| --------- | --------------------------------------------------- |
+| `v13.0.0` | `useRouter`가 `next/navigation`에서 소개되었습니다. |


Suggested change

| Version | Changes |

| --------- | --------------------------------------------------- |

| `v13.0.0` | `useRouter`가 `next/navigation`에서 소개되었습니다. |

| Version | Changes |

| --------- | --------------------------------------------------- |

| `v13.0.0` | `next/navigation`의 `useRouter`가 추가됨. |

synuns

@chaejunlee 리뷰 반영하였으며, 논의가 필요하거나 의견을 여쭙고 싶은 부분 리뷰 남겼습니다 :)

synuns · 2023-07-01T09:10:09Z

docs/02-app/02-api-reference/04-functions/use-router.mdx

@@ -111,8 +111,8 @@ export default function Layout({ children }) {
 }
 ```

-> **Good to know**: `<NavigationEvents>` is wrapped in a [`Suspense` boundary](/docs/app/building-your-application/routing/loading-ui-and-streaming#example) because[`useSearchParams()`](/docs/app/api-reference/functions/use-search-params) causes client-side rendering up to the closest `Suspense` boundary during [static rendering](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#static-rendering-default). [Learn more](/docs/app/api-reference/functions/use-search-params#behavior).
+> **참고**: [`useSearchParams()`](/docs/app/api-reference/functions/use-search-params)는 [정적 렌더링](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#static-rendering-default)중 클라이언트 사이드 렌더링을 [`Suspense` 바운더리](/docs/app/building-your-application/routing/loading-ui-and-streaming#example)까지 발생시키기 때문에 `<NavigationEvents>`는 `Suspense` 바운더리로 감싸집니다. [더 배우기](/docs/app/api-reference/functions/use-search-params#behavior)


~는 ~을 ~하다. 의 순서로 해석하는 것이 자연스러울 것이라고 생각하는데 이에 대해 의견을 여쭤보고 싶습니다.

learn more를 더 배우기로 직역하기는 했으나, 한글 문서에서는 더 보기 혹은 더 알아보기로 사용하고는 하는데 어떻게 생각하시는지 해당 문서에서는 어떻게 통일하고있는지 의견을 여쭤보고 싶습니다

synuns · 2023-07-01T09:14:53Z

docs/02-app/02-api-reference/04-functions/use-router.mdx

+> - 새로운 `useRouter` 훅은 `next/router`가 아니라 `next/navigation`에서 import되어야 합니다.
+> - `pathname` 문자열은 삭제되었으며 [`usePathname()`](/docs/app/api-reference/functions/use-pathname)로 대체되었습니다.
+> - `query` 객체는 삭제되었으며 [`useSearchParams()`](/docs/app/api-reference/functions/use-search-params)로 대체되었습니다.
+> - `router.events`는 현재 지원하지 않습니다. [참조하기](#router-이벤트)


[See below]를 [참조하기]로 의역하였으나 문서 전체의 통일성을 헤치지 않는지 여쭙고 싶습니다

넵 문제 없을 것 같습니다.

yoo-jimin127

LGTM! 수고 많으셨습니다 :) 👍
추가로 할당 희망하시는 티켓은 이슈에 작성해주셔도 됩니다 !!

docs: 초안 작성

9af1476

synuns requested a review from ChanghyeonYoon as a code owner June 26, 2023 12:38

synuns changed the title ~~02-app > 02-api-reference > 04-functions > use-router~~ 02-app > 02-api-reference > 04-functions > use-router.mdx Jun 26, 2023

ChanghyeonYoon added the documentation 문서 작업 label Jun 27, 2023

chaejunlee added the In Review label Jun 29, 2023

chaejunlee requested review from chaejunlee and removed request for ChanghyeonYoon June 29, 2023 16:11

chaejunlee assigned synuns Jun 29, 2023

chaejunlee linked an issue Jun 29, 2023 that may be closed by this pull request

use-router.mdx #64

Closed

chaejunlee reviewed Jun 29, 2023

View reviewed changes

devyuriii mentioned this pull request Jun 29, 2023

🚀New Next.js Docs Translation Progress (Korean) #1

Open

fix: 1차 리뷰 반영

bd1df3f

synuns commented Jul 1, 2023

View reviewed changes

synuns requested a review from chaejunlee July 11, 2023 05:16

yoo-jimin127 approved these changes Jul 12, 2023

View reviewed changes

yoo-jimin127 merged commit 0fe841b into Nextjs-kr:main Jul 12, 2023

synuns mentioned this pull request Jul 12, 2023

02-app > 02-api-reference > 04-functions > use-router.mdx #419

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

02-app > 02-api-reference > 04-functions > use-router.mdx #272

02-app > 02-api-reference > 04-functions > use-router.mdx #272

synuns commented Jun 26, 2023

chaejunlee left a comment •

edited

Loading

chaejunlee Jun 29, 2023

chaejunlee Jun 29, 2023

chaejunlee Jun 29, 2023

chaejunlee Jun 29, 2023

chaejunlee Jun 29, 2023

synuns Jul 1, 2023

synuns Jul 1, 2023 •

edited

Loading

chaejunlee Jul 12, 2023

synuns Jul 12, 2023

chaejunlee Jun 29, 2023

synuns left a comment

synuns Jul 1, 2023 •

edited

Loading

synuns Jul 1, 2023

chaejunlee Jul 12, 2023

yoo-jimin127 left a comment

	description: useRouter 훅에 대한 API 참조입니다.
	description: useRouter 훅에 대한 API 레퍼런스입니다.

	레이아웃에서 import될 수 있습니다.
	레이아웃으로 import할 수 있습니다.

02-app > 02-api-reference > 04-functions > use-router.mdx #272

02-app > 02-api-reference > 04-functions > use-router.mdx #272

Conversation

synuns commented Jun 26, 2023

기여자용

문서 개선

Progress

chaejunlee left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

synuns Jul 1, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

synuns left a comment

Choose a reason for hiding this comment

synuns Jul 1, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yoo-jimin127 left a comment

Choose a reason for hiding this comment

chaejunlee left a comment •

edited

Loading

synuns Jul 1, 2023 •

edited

Loading

synuns Jul 1, 2023 •

edited

Loading