React 18 - ReactDOM.render & createRoot

2206 단어 CSCS

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사용시 npm start시 console에러
/*  React17  */

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

ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
  document.getElementById('root')
);
/* React18 */
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const rootNode = document.getElementById("root");

ReactDOM.createRoot(rootNode).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
  • ReactDOM의 import가 변경되었고, createRoot(rootNode)가 ReactDOM과 render 사이

좋은 웹페이지 즐겨찾기