React 18 - createRoot

리액트를 이용해서 PR page를 만들고 있는 과정이었다. 열심히 console을 찍어가며 코딩을 하고 있었는데 계속해서 warning 메세지가 뜨는 것을 발견했다.

잘 안보이실 분들을 위해..

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. Learn more: 
https://reactjs.org/link/switch-to-createroot

잘은 모르지만 새로 나온 리액트 버전 18에서는 ReactDOM.render가 아니라, createRoot를 사용해야 한다는 것 같다. 아예 안돌아가진 않으니 권장사항으로 Warning 메세지를 띄워준 것 같다.

해당 내용을 공식문서에서 찾아보자.
createRoot - React Reference

원래의 코드는 다음과 같았다.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
	// <React.StrictMode>
		<App />,
	// </React.StrictMode>,
	document.getElementById("root")
);
reportWebVitals();

다음과 같이 바꿔주자.

import React from "react";
import App from "./App";
import * as ReactDOMClient from 'react-dom/client';
import reportWebVitals from "./reportWebVitals";


const rootnode = ReactDOMClient.createRoot(document.getElementById('root'));
rootnode.render(
  //<React.StrictMode>
    <App />
  //</React.StrictMode>
);
reportWebVitals();

react-dom 을 렌더링 하는 맥락은 똑같은데, react-dom을 import 해오는 부분이 바뀌었다.

이전에는 react-dom 에서 import 해와서 ReactDOM 으로 사용하고 ReactDOM.render( ~~ ) 와 같이 하였다.

바뀐 리액트 버전 18에서는 react-dom/client 에서 react-dom을 import 해오고 createRoot를 사용하여 root element(최상위요소)를 맵핑시켜주고 이를 rootnode에 할당한다.

rootnode에 App 컴포넌트를 render 해줌으로써 제일 처음 웹이 로드됐을 때 순서대로 돔트리가 짜여진다.