ReactDOM.render is no longer supported in React 18. Use createRoot instead. 해결

새로운 토이프로젝트를 시작하면서 프로젝트를 만들었다

create-react-app을 이용해서 띄웠는데...

 

react-dom.development.js:86 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() 방식을 쓰지 않는다는 것!

 

이게 기존 코드였다면....

import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";

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

 

React 18 부터는 아래처럼 바꾸어야한다.

 

import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";

const container = document.getElementById("root");
const root = createRoot(container);
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

 

바꾸어주었더니 워닝 메시지가 사라졌다.

 

깔끔~