Skip to content

Translate: render #627

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

Merged
merged 4 commits into from
May 14, 2023
Merged

Translate: render #627

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1024010
Translate: render
ongddree May 8, 2023
f1cba84
fix: apply translation glossary
ongddree May 10, 2023
4ef9b5e
Merge branch 'main' into translate/render
hg-pyun May 12, 2023
4b9040e
Merge branch 'main' into translate/render
eomttt May 13, 2023
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
62 changes: 31 additions & 31 deletions src/content/reference/react-dom/render.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
---
title: render
title: 렌더링하기
---

<Deprecated>

This API will be removed in a future major version of React.
이 API는 향후 React 메이저 버전에서 삭제될 예정입니다.

In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Using `render` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)
React 18에서 `render`는 [`createRoot`](/reference/react-dom/client/createRoot)로 교체되었습니다. React 18에서 `render`를 사용하면 앱이 React 17을 실행하는 것처럼 동작하므로 경고를 표시합니다. 자세한 내용은 [클라이언트 렌더링 API 업데이트](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)를 참조하세요.

</Deprecated>

<Intro>

`render` renders a piece of [JSX](/learn/writing-markup-with-jsx) ("React node") into a browser DOM node.
`render`는 [JSX](/learn/writing-markup-with-jsx) ("React node")를 브라우저 DOM 노드로 렌더링합니다.

```js
render(reactNode, domNode, callback?)
Expand All @@ -24,11 +24,11 @@ render(reactNode, domNode, callback?)

---

## Reference {/*reference*/}
## 참조 {/*reference*/}

### `render(reactNode, domNode, callback?)` {/*render*/}

Call `render` to display a React component inside a browser DOM element.
React 컴포넌트를 브라우저 DOM 요소 내에 표시하려면 `render`를 호출하세요.

```js
import { render } from 'react-dom';
Expand All @@ -37,40 +37,40 @@ const domNode = document.getElementById('root');
render(<App />, domNode);
```

React will display `<App />` in the `domNode`, and take over managing the DOM inside it.
React는 `domNode` 내에 `<App />`을 표시하고 해당 DOM을 관리합니다.

An app fully built with React will usually only have one `render` call with its root component. A page that uses "sprinkles" of React for parts of the page may have as many `render` calls as needed.
보통 React로 완전히 구축된 앱은 `render`를 최상 컴포넌트와 함께 한 번만 호출합니다. 페이지의 “일부분”에 React를 사용하는 경우 필요한 만큼 `render`를 호출할 수 있습니다.

[See more examples below.](#usage)
[아래 예시를 참고하세요.](#usage)

#### Parameters {/*parameters*/}
#### 매개변수 {/*parameters*/}

* `reactNode`: A *React node* that you want to display. This will usually be a piece of JSX like `<App />`, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`.
* `reactNode`: 표시하려는 *React node*입니다. 보통 `<App />`과 같은 JSX를 사용하지만 [`createElement()`](/reference/react/createElement)로 구성된 React 요소, 문자열, 숫자, `null`, 또는 `undefined`를 전달할 수 있습니다.

* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will display the `reactNode` you pass inside this DOM element. From this moment, React will manage the DOM inside the `domNode` and update it when your React tree changes.
* `domNode`: [DOM 요소](https://developer.mozilla.org/ko/docs/Web/API/Element)입니다. React는 전달한 `reactNode`를 이 DOM 요소 내에 표시합니다. 이후로 React는 `domNode` 내부의 DOM을 관리하고 React 트리가 변경될 때 업데이트합니다.

* **optional** `callback`: A function. If passed, React will call it after your component is placed into the DOM.
* **optional** `callback`: 함수입니다. 전달하면 React는 컴포넌트가 DOM에 배치된 후에 이를 호출합니다.


#### Returns {/*returns*/}
#### 반환값 {/*returns*/}

`render` usually returns `null`. However, if the `reactNode` you pass is a *class component*, then it will return an instance of that component.
`render`는 일반적으로 `null`을 반환합니다. 하지만 전달한 `reactNode`가 *class 컴포넌트*인 경우, 해당 컴포넌트의 인스턴스를 반환합니다.

#### Caveats {/*caveats*/}
#### 주의 사항 {/*caveats*/}

* In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Please use `createRoot` for React 18 and beyond.
* React 18에서 `render`는 [`createRoot`](/reference/react-dom/client/createRoot)로 교체되었습니다. React 18 이상에서는 `createRoot`를 사용하세요.

* The first time you call `render`, React will clear all the existing HTML content inside the `domNode` before rendering the React component into it. If your `domNode` contains HTML generated by React on the server or during the build, use [`hydrate()`](/reference/react-dom/hydrate) instead, which attaches the event handlers to the existing HTML.
* 처음 `render`를 호출하면 React는 React 컴포넌트를 렌더링하기 전에 해당 `domNode` 내 존재하는 HTML을 모두 초기화합니다. 서버에서 혹은 빌드 중에 React에 의해 생성된 HTML이 `domNode`에 포함되어 있다면 기존 HTML에 이벤트 핸들러를 연결하는 [`hydrate()`](/reference/react-dom/hydrate)를 대신 사용하세요.

* If you call `render` on the same `domNode` more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same `domNode` again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates.
* 동일한 `domNode`에서 `render`를 두 번 이상 호출하면 React는 최신 JSX를 반영하기 위해 필요한 만큼 DOM을 업데이트합니다. React는 이전에 렌더링 된 트리와 ["맞춰보며"](/learn/preserving-and-resetting-state) 재사용할 수 있는 DOM 부분과 재생성해야 하는 DOM 부분을 결정합니다. 동일한 `domNode`에 `render`를 재호출하는 것은 최상단 컴포넌트에서 [`set` 함수](/reference/react/useState#setstate)를 호출하는 것과 유사합니다. React는 불필요한 DOM 업데이트를 방지합니다.

* If your app is fully built with React, you'll likely have only one `render` call in your app. (If you use a framework, it might do this call for you.) When you want to render a piece of JSX in a different part of the DOM tree that isn't a child of your component (for example, a modal or a tooltip), use [`createPortal`](/reference/react-dom/createPortal) instead of `render`.
* 앱 전체가 React로 구축된 경우, `render` 호출은 앱에서 한 번만 발생할 것입니다. (프레임워크를 사용하는 경우, 이 호출을 대신 수행할 수 있습니다) 자식 컴포넌트가 아니라 DOM 트리의 다른 부분(예시: 모달 또는 툴팁)에 JSX를 렌더링하려면 `render` 대신 [`createPortal`](/reference/react-dom/createPortal)을 사용하세요.

---

## Usage {/*usage*/}
## 사용법 {/*usage*/}

Call `render` to display a <CodeStep step={1}>React component</CodeStep> inside a <CodeStep step={2}>browser DOM node</CodeStep>.
<CodeStep step={1}>React 컴포넌트</CodeStep>를 <CodeStep step={2}>브라우저 DOM 노드</CodeStep> 안에 표시하려면 `render`를 호출하세요.

```js [[1, 4, "<App />"], [2, 4, "document.getElementById('root')"]]
import { render } from 'react-dom';
Expand All @@ -79,9 +79,9 @@ import App from './App.js';
render(<App />, document.getElementById('root'));
````

### Rendering the root component {/*rendering-the-root-component*/}
### 최상단 컴포넌트 렌더링하기 {/*rendering-the-root-component*/}

In apps fully built with React, **you will usually only do this once at startup**--to render the "root" component.
React로 완전히 구축된 앱에서는 "최상단('root')" 컴포넌트를 렌더링하기 위해--**일반적으로 시작할 때 한 번만 이 작업을 수행합니다.**

<Sandpack>

Expand All @@ -101,13 +101,13 @@ export default function App() {

</Sandpack>

Usually you shouldn't need to call `render` again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will [use state.](/reference/react/useState)
보통 `render`를 다시 호출하거나 다른 곳에서 호출할 필요는 없습니다. 이 시점부터 React가 애플리케이션의 DOM을 관리합니다. UI를 업데이트하려면 컴포넌트에서 [state를 사용](/reference/react/useState)할 것입니다.

---

### Rendering multiple roots {/*rendering-multiple-roots*/}
### 여러 개의 최상단 컴포넌트 렌더링하기 {/*rendering-multiple-roots*/}

If your page [isn't fully built with React](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), call `render` for each top-level piece of UI managed by React.
[완전히 React로 구축된](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) 페이지가 아니라면 React가 관리하는 최상위 UI마다 `render`를 호출하세요.

<Sandpack>

Expand Down Expand Up @@ -177,13 +177,13 @@ nav ul li { display: inline-block; margin-right: 20px; }

</Sandpack>

You can destroy the rendered trees with [`unmountComponentAtNode()`.](/reference/react-dom/unmountComponentAtNode)
[`unmountComponentAtNode()`](/reference/react-dom/unmountComponentAtNode)를 사용하여 렌더링 된 트리를 제거할 수 있습니다.

---

### Updating the rendered tree {/*updating-the-rendered-tree*/}
### 렌더링 된 트리 업데이트하기 {/*updating-the-rendered-tree*/}

You can call `render` more than once on the same DOM node. As long as the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second are not destructive:
동일한 DOM 노드에서 `render`를 여러 번 호출할 수 있습니다. 이전에 렌더링 된 구조와 컴포넌트 트리가 일치한다면 React는 [state를 보존](/learn/preserving-and-resetting-state)합니다.

<Sandpack>

Expand Down Expand Up @@ -215,4 +215,4 @@ export default function App({counter}) {

</Sandpack>

It is uncommon to call `render` multiple times. Usually, you'll [update state](/reference/react/useState) inside your components instead.
`render`를 여러 번 호출하는 것은 일반적이지 않습니다. 보통 컴포넌트 내에서 [상태를 업데이트](/reference/react/useState)합니다.