unmountComponentAtNode removes a mounted React component from the DOM.
unmountComponentAtNode는 마운트된 React 컴포넌트를 DOM에서 제거합니다.
unmountComponentAtNode(domNode)Reference참조
unmountComponentAtNode(domNode)
Call unmountComponentAtNode to remove a mounted React component from the DOM and clean up its event handlers and state.
unmountComponentAtNode를 호출하면 마운트된 React 컴포넌트를 DOM에서 제거하고 해당 이벤트 핸들러와 state를 정리합니다.
import { unmountComponentAtNode } from 'react-dom';
const domNode = document.getElementById('root');
render(<App />, domNode);
unmountComponentAtNode(domNode);See more examples below. 아래에서 더 많은 예시를 확인하세요.
Parameters매개변수
domNode: A DOM element. React will remove a mounted React component from this element.domNode: DOM 엘리먼트. React는 이 엘리먼트에서 마운트된 React 컴포넌트를 제거합니다.
Returns반환값
unmountComponentAtNode returns true if a component was unmounted and false otherwise.
unmountComponentAtNode 는 컴포넌트가 마운트 해제된 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
Usage사용법
Call unmountComponentAtNode to remove a mounted React component from a browser DOM node and clean up its event handlers and state.
unmountComponentAtNode를 호출하면 브라우저 DOM 노드에서 마운트된 React 컴포넌트를 제거하고 해당 이벤트 핸들러와 state를 정리합니다.
import { render, unmountComponentAtNode } from 'react-dom';
import App from './App.js';
const rootNode = document.getElementById('root');
render(<App />, rootNode);
// ...
unmountComponentAtNode(rootNode);Removing a React app from a DOM elementDOM 엘리먼트에서 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. 간혹 기존 페이지나 React만으로 작성되지 않은 페이지에 React를 “뿌려주고” 싶은 경우가 있을 것입니다. 이 경우 렌더링된 DOM 노드에서 UI, state, 리스너를 모두 제거하여 React 앱을 “중지”해야 할 수 있습니다.
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”을 클릭하여면 앱이 삭제됩니다:
import './styles.css'; import { render, unmountComponentAtNode } from 'react-dom'; import App from './App.js'; const domNode = document.getElementById('root'); document.getElementById('render').addEventListener('click', () => { render(<App />, domNode); }); document.getElementById('unmount').addEventListener('click', () => { unmountComponentAtNode(domNode); });