React v18에서 나오는 에러 "ReactDOM.render is no longer supported in React 18"

불 - 편

 

현재 리액트를 사용하면 콘솔창에 "경고: ReactDOM.render는 React 18에서 더 이상 지원되지 않습니다. 대신 createRoot를 사용하세요. 새 API로 전환할 때까지 앱은 React 17을 실행하는 것처럼 작동합니다. 자세히 알아보기: https://reactjs.org/link/switch-to-createroot ”라는 경고 메세지가 계속해서 노출된다.

 

./src/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")
);

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

이런 코드가 작성되어 있을 것이다.

ReactDOM.render를 리액트 v18부터 사용하지 않기 때문에 나타나는 경고 메세지이다.

 

 

 

import React from 'react';
import * as 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(<App />);
reportWebVitals();

해당 코드를 복사 붙여넣기하면 경고 메세지가 사라진다.

 

 

 

 

편 - 안