[React] 인터넷 연결확인 모달 + 컴포넌트 종료(?) 나가기

매일매일이 새롭당 : ) 하핳

 

 

 

이 전 포스팅에서는 인터넷 연결 확인 및 경고 모달을 띄웠다면,

https://hayley-0616.tistory.com/47

[React] 인터넷 연결확인 및 경고모달

 

 

 

이 번 포스팅에서는 모달의 '확인'을 누른 경우 컴포넌트가 종료(?) 혹은 나가지는 로직을 구현해 보았다.

 

 

점점 새로운것을 알게되면서 적용하니 아주 신기하다눙.. 👀

 

 

 

Login.jsx (부모컴포넌트) 에서 선언 => props 로 NetworkCheckModal.jsx (자식 컴포넌트) 로 넘겨주었다.

 

 

 

 

 

 

 

 

1. npm i react-dom 설치하기

import ReactDOM from 'react-dom';

 

 

 

 

 

 

2. 컴포넌트 (?) 혹은 해당 페이지에서 나가지는 로직 구현

 

처음에 넣은 코드 

const handleExitApp = () => {
    ReactDOM.unmountComponentAtNode(document.getElementById('root'));
  };

 

React 앱을 렌더링하는 root DOM 노드에서 ReactDOM.unmountComponentAtNode() 함수를 사용하여

React 컴포넌트를 언마운트하도록 구현을 해보았다.

 

 

 

 

 

그치만 실행을 했을 때 실행이 안되어  console.log 를 찍어보니 이렇게 나와있었다..... 😂

 

 

 

뜬 오류

react_devtools_backend.js:2655 Warning: You are calling ReactDOM.unmountComponentAtNode() on a container that was previously passed to ReactDOMClient.createRoot(). This is not supported. Did you mean to call root.unmount()?

 

🤨 이유 

기존에 사용하던 ReactDOM.unmountComponentAtNode() 함수

 

(v17이전까지 컴포넌트를 제거하는 용도로 사용됨) 를 사용하려고 할 때 발생하는 경고였다.

 

 

 

v18부터는 이 함수 대신 Root API의 unmount() 메서드를 사용하여 컴포넌트를 제거해야 했다. 

 

따라서, 위 경고가 발생할 경우 root.unmount()로 수정하여 사용하면 된다고 했다. 

 

 

 

 

 

3. 고쳐 쓴 코드 

 const handleExit = () => {
    const root = document.getElementById('root');
    ReactDOM.createRoot(root).unmount();
  };

 

 

handleExit() 함수

ReactDOM.createRoot() 함수를 사용하여 React의 Root API를 생성하고, 해당 API의 unmount() 메서드를 사용하여 어플리케이션을 종료하는 함수로, 

React v18부터 도입된 Root API는 ReactDOM.render() 함수 대신에 사용할 수 있는 새로운 API라고 한다!

 

 

 

document.getElementById('root')

어플리케이션 혹은 컴포넌트를 을 렌더링하는 루트 DOM 노드를 가져와서

그리고 ReactDOM.createRoot(root)를 호출하여 해당 루트 DOM 노드에 대한 Root API를 생성하고난 뒤,

 

생성한 Root API에서 unmount() 메서드를 호출하여 어플리케이션 혹은 컴포넌트를 종료한다.

 

 

unmount() 메서드는 해당 Root API에 연결된 모든 컴포넌트를 제거하고, 해당 DOM 노드에서 React 컴포넌트를 언마운트함으로써, 종료를 하게 되는것이다 ! 

 

 

 

---

ReactDOM 

https://www.npmjs.com/package/react-dom