ReactDOM.render is no longer supported in React 18 오류 메시지 해결하기

리액트 프로젝트를 생성한 후 브라우저의 검사 항목에서 콘솔을 보면 아래와 같이 경고 메시지가 보이는 경우가 있다.

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.

 

이와 같은 경고 메시지가 보이는 경우는 index.js 파일을 열어서 아래와 같은 수정해준다.

 

import React from 'react';
import ReactDOM from 'react-dom';   -> import { createRoot } from 'react-dom/client';

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

 

const container = document.getElementById('root');
const root = createRoot(container);

ReactDOM.render(  -> root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);