[React] react 18버전 ReactDOM 관련 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

실습 하던 콘솔창에 위와 같은 경고가 계속 뜨는 것을 확인하고 찾아보니,

 react18 버전에서 ReactDOM 렌더링 방식이 바뀌었다고 한다.

 

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis

How to Upgrade to React 18 – React Blog

https://17.reactjs.org/docs/concurrent-mode-reference.html#createroot

Concurrent Mode API Reference (Experimental) – React

위 공식문서를 참조해서 내 코드도 바꾸어 주었다.

 

기존 내 코드

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

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

 

18버전에 맞게 변경한 코드

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

 

첨에 ReactDOM.render()만 ReactDOM.createRoot(~).render(~)로 바꾸어주니까,

ReactDOM을 "react-dom"이 아니라 "react-dom/client"에서 import 하라는 경고문구가 뜨길래 import 구문도 수정해주었다.

 

그리곤 경고문구 사라짐!