[React 18] ReactDOM.render
평소처럼 CRA로 React 프로젝트를 만들고 npm run start
했더니 이러한 에러 메시지가 콘솔창에 보였다. 🤔
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
읽어보니, 새로 나온 React 18에서는 ReactDOM.render가 아니라, createRoot를 사용해야 한다는 것 같다.
React 공식문서를 참고하여 index.js
를 아래와 같이 변경해주었다.
- 이전 작성 방식
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();
- 변경 후
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const rootNode = document.getElementById("root");
ReactDOM.createRoot(rootNode).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
import ReactDOM
부분, createRoot(rootNode)
부분이 바뀌었다.
Author And Source
이 문제에 관하여([React 18] ReactDOM.render), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sana0803/React-18-ReactDOM.render저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)