[React] 22 / 04/ 08 연습 프로젝트 트러블 슈팅

오류 발생

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.render가 아니라, createRoot를 추가하여 사용해야 한다.

리액트 공식 문서 : https://ko.reactjs.org/docs/concurrent-mode-reference.html#createroot

 

해결방법

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')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

• 위와 같은 코드에서 두 번째의 import RectDom에 from 파트에 "react-dom/client"로 수정한다.
• 일곱 번째 줄의 코드를 ReactDom.createRoot(document.getElementById('root')).render로 변경한다.
• 수정한 코드는 다음과 같다.

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>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();