[React] Uncaught TypeError index.js

문제

index.js 파일을 수정하고 렌더링 했지만, 화면에 아무것도 나타나지 않음!

콘솔을 보니 아래처럼 에러가 났었다. 

react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function

 

원인

여기에 사용한 ReactDOM은 React 18의 최신 가져오기 방법에서 더 이상 사용되지 않는다고 한다.

packge.json을 보니 18버전이었다.

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

reportWebVitals();

 

해결 방법

ReactDOM대신 createRoot를 import 해서 사용하면 해결된다!

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();