[React/리액트] Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17

[React/리액트]  Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17

 

 

 

어제 리액트 프로젝트를 처음 깔아서 실행을 해보는데

콘솔창에 자꾸 저렇게 거슬리는 Warning이 떴다.

 

ReactDOM.render는 React 17까지의 레거시 메소드이기 때문에

React 18부터는 createRoot 라는 메소드를 사용하라는 의미이다.

 

 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(<App />, document.getElementById('root'));

 

현재 나의 코드는 이렇게 작성되어 있는데

여기서 ReactDOM.createRoot를 쳐보았더니 찾을수 없는 function이라고 나온다..

 

아니 너네가 바꾸라며...

 

 

 

 

 

https://github.com/reactwg/react-18/discussions/5

Replacing render with createRoot · Discussion #5 · reactwg/react-18

그래서 워닝 메세지에 같이 포함되어있던

링크로 들어가서 해결방법을 모색해보았다.

 

 

 

import React from 'react';
import App from './App';
import * as ReactDOMClient from 'react-dom/client'; // 추가

ReactDOMClient.createRoot(document.getElementById('root')).render(<App />); // 추가

요렇게 3행을 새로 임포트 해주고, createRoot를 사용하니

워닝이 해결되었다.