Skip to content

Commit

Permalink
Translate: unmountComponentAtNode (#775)
Browse files Browse the repository at this point in the history
* docs: 번역 초안 완성

* docs: 맞춤법 수정

* docs: 띄어쓰기 수정

---------

Co-authored-by: Haegul Pyun <[email protected]>
  • Loading branch information
mnxmnz and hg-pyun authored Sep 23, 2023
1 parent 5101a99 commit 78e0af0
Showing 1 changed file with 15 additions and 16 deletions.
31 changes: 15 additions & 16 deletions src/content/reference/react-dom/unmountComponentAtNode.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ title: unmountComponentAtNode

<Deprecated>

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

In React 18, `unmountComponentAtNode` was replaced by [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount).
React 18에서 `unmountComponentAtNode`[`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount)로 교체되었습니다.

</Deprecated>

<Intro>

`unmountComponentAtNode` removes a mounted React component from the DOM.
`unmountComponentAtNode`는 DOM에 마운트된 React 컴포넌트를 제거합니다.

```js
unmountComponentAtNode(domNode)
Expand All @@ -24,11 +24,11 @@ unmountComponentAtNode(domNode)

---

## Reference {/*reference*/}
## 레퍼런스 {/*reference*/}

### `unmountComponentAtNode(domNode)` {/*unmountcomponentatnode*/}

Call `unmountComponentAtNode` to remove a mounted React component from the DOM and clean up its event handlers and state.
`unmountComponentAtNode`를 호출해서 DOM에 마운트된 React 컴포넌트를 제거하고 관련된 이벤트 핸들러와 state를 정리합니다.

```js
import { unmountComponentAtNode } from 'react-dom';
Expand All @@ -39,21 +39,21 @@ render(<App />, domNode);
unmountComponentAtNode(domNode);
```

[See more examples below.](#usage)
[아래에서 더 많은 예시를 확인하세요.](#usage)

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

* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will remove a mounted React component from this element.
* `domNode`: [DOM 엘리먼트입니다.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React는 이 엘리먼트에 마운트된 컴포넌트를 제거합니다.

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

`unmountComponentAtNode` returns `true` if a component was unmounted and `false` otherwise.
`unmountComponentAtNode`는 컴포넌트가 마운트 해제되면 `true`를 반환하고 그렇지 않으면 `false`를 반환합니다.

---

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

Call `unmountComponentAtNode` to remove a <CodeStep step={1}>mounted React component</CodeStep> from a <CodeStep step={2}>browser DOM node</CodeStep> and clean up its event handlers and state.
`unmountComponentAtNode`를 호출해서 <CodeStep step={2}>브라우저 DOM 노드</CodeStep>에서 <CodeStep step={1}>마운트된 React 컴포넌트</CodeStep>를 제거하고 관련된 이벤트 핸들러와 state를 정리합니다.

```js [[1, 5, "<App />"], [2, 5, "rootNode"], [2, 8, "rootNode"]]
import { render, unmountComponentAtNode } from 'react-dom';
Expand All @@ -66,12 +66,11 @@ render(<App />, rootNode);
unmountComponentAtNode(rootNode);
```

### DOM 엘리먼트에서 React 애플리케이션 제거하기 {/*removing-a-react-app-from-a-dom-element*/}

### Removing a React app from a DOM element {/*removing-a-react-app-from-a-dom-element*/}
때때로 기존 페이지나 일부만 React로 작성된 페이지에서 React를 "포함"하고 싶을 수 있습니다. 이런 경우 렌더링 된 DOM 노드에서 UI와 state 및 리스너를 모두 제거해서 React 애플리케이션을 "중지"해야 할 수 있습니다.

Occasionally, you may want to "sprinkle" React on an existing page, or a page that is not fully written in React. In those cases, you may need to "stop" the React app, by removing all of the UI, state, and listeners from the DOM node it was rendered to.

In this example, clicking "Render React App" will render a React app. Click "Unmount React App" to destroy it:
아래 예시에서는 "Render React App"을 클릭하면 React 애플리케이션을 렌더링합니다. "Unmount React App"을 클릭하면 React 애플리케이션을 제거합니다.

<Sandpack>

Expand Down

0 comments on commit 78e0af0

Please sign in to comment.