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.

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

[#88] docs: getInitialProps 번역 #119

Merged
merged 2 commits into from
Aug 11, 2024
Merged
Changes from 1 commit
Commits
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
41 changes: 20 additions & 21 deletions pages/docs/pages/api-reference/functions/get-initial-props.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,11 @@ title: getInitialProps
description: Fetch dynamic data on the server for your React component with getInitialProps.
---

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

# getInitialProps

> **Good to know**: `getInitialProps` is a legacy API. We recommend using [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) or [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props) instead.
> **알아두기** : `getInitialProps`는 레거시 API입니다. 대신 `getStaticProps` 또는 `getServerSideProps`를 사용하는 것이 좋습니다.

`getInitialProps` is an `async` function that can be added to the default exported React component for the page. It will run on both the server-side and again on the client-side during page transitions. The result of the function will be forwarded to the React component as `props`.
`getInitialProps`는 페이지에 기본적으로 내보내지는 React 컴포넌트에 추가할 수 있는 `비동기` 함수입니다. 이 함수는 서버 사이드와 클라이언트 사이드의 페이지 전환 시 모두 실행됩니다. 함수의 결과는 React 컴포넌트에 `props`로 전달됩니다.

```tsx filename="pages/index.tsx" switcher
import { NextPageContext } from 'next'
Expand Down Expand Up @@ -37,26 +35,27 @@ export default function Page({ stars }) {
}
```

> **Good to know**:
> **알아두기**:
>
> - Data returned from `getInitialProps` is serialized when server rendering. Ensure the returned object from `getInitialProps` is a plain `Object`, and not using `Date`, `Map` or `Set`.
> - For the initial page load, `getInitialProps` will run on the server only. `getInitialProps` will then also run on the client when navigating to a different route with the [`next/link`](/docs/pages/api-reference/components/link) component or by using [`next/router`](/docs/pages/api-reference/functions/use-router).
> - If `getInitialProps` is used in a custom `_app.js`, and the page being navigated to is using `getServerSideProps`, then `getInitialProps` will also run on the server.
> - `getInitialProps`에서 반환된 데이터는 서버 렌더링 시 직렬화됩니다. `getInitialProps`에서 반환하는 객체는 단순한 `Object`여야 하며, `Date`, `Map`, `Set` 같은 객체를 사용하지 않아야 합니다.
> - 초기 페이지 로드 시, `getInitialProps`는 서버에서만 실행됩니다. 이후에는 `next/link` 컴포넌트나 `next/router`를 사용하여 다른 경로로 이동할 때 클라이언트에서도 `getInitialProps`가 실행됩니다.
hyunmyungJaneLee marked this conversation as resolved.
Show resolved Hide resolved
> - `getInitialProps`가 사용자 정의 `_app.js`에서 사용되며, 이동하려는 페이지가 `getServerSideProps`를 사용하는 경우, `getInitialProps`는 서버에서도 실행됩니다.

## Context 객체
hyunmyungJaneLee marked this conversation as resolved.
Show resolved Hide resolved

## Context Object
`getInitialProps`는 `context`라는 단일 인자를 받습니다. 이 `context`는 다음과 같은 속성을 가진 객체입니다:

`getInitialProps` receives a single argument called `context`, which is an object with the following properties:
| 이름 | 설명 |
| ---------- | ---------------------------------------------------------------------------------------------- |
| `pathname` | 현재 경로, `/pages` 디렉토리 내의 페이지 경로 |
| `query` | URL의 쿼리 문자열을 객체로 파싱한 값 |
| `asPath` | 브라우저에 표시되는 실제 경로(query 포함)의 `문자열` |
| `req` | [HTTP 요청 객체](https://nodejs.org/api/http.html#http_class_http_incomingmessage) (서버 전용) |
| `res` | [HTTP 응답 객체](https://nodejs.org/api/http.html#http_class_http_serverresponse) (서버 전용) |
| `err` | 렌더링 중 오류가 발생할 경우 오류 객체 |

| Name | Description |
| ---------- | ----------------------------------------------------------------------------------------------------- |
| `pathname` | Current route, the path of the page in `/pages` |
| `query` | Query string of the URL, parsed as an object |
| `asPath` | `String` of the actual path (including the query) shown in the browser |
| `req` | [HTTP request object](https://nodejs.org/api/http.html#http_class_http_incomingmessage) (server only) |
| `res` | [HTTP response object](https://nodejs.org/api/http.html#http_class_http_serverresponse) (server only) |
| `err` | Error object if any error is encountered during the rendering |

## Caveats
## 주의사항

- `getInitialProps` can only be used in `pages/` top level files, and not in nested components. To have nested data fetching at the component level, consider exploring the [App Router](/docs/app/building-your-application/data-fetching).
- Regardless of whether your route is static or dynamic, any data returned from `getInitialProps` as `props` will be able to be examined on the client-side in the initial HTML. This is to allow the page to be [hydrated](https://react.dev/reference/react-dom/hydrate) correctly. Make sure that you don't pass any sensitive information that shouldn't be available on the client in `props`.
- `getInitialProps``pages/` 디렉토리의 최상위 파일에서만 사용할 수 있으며, 중첩된 컴포넌트에서는 사용할 수 없습니다. 컴포넌트 수준에서 중첩된 데이터 가져오기를 하려면 [App Router](/docs/app/building-your-application/data-fetching)를 참고해 보세요.
- 경로가 정적이든 동적이든 상관없이, `getInitialProps`에서 반환된 데이터는 초기 HTML에서 클라이언트 단에서 확인할 수 있습니다. 이는 페이지가 [hydrated](https://react.dev/reference/react-dom/hydrate)될 수 있도록 하기 위해서입니다. 클라이언트에서 접근하면 안 되는 민감한 정보는 `props`에 포함되지 않도록 주의하세요.
Loading