ReactDOM.render 경고

1) 문제 사항

 

리액트 실행 중 항상 콘솔창에 다음과 같은 에러가 표시되어 있다.

ReactDOM.render 오류

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

 

이말은 즉, ReactDOM.render가 더이상 18버전에서 지원하지 않으니 createRoot를 대신 사용하라는 뜻이다. 안바꾸면 React 17버전처럼 운영될거라는 말!

 

2) 해결 방법

 

index.js를 다음과 같이 변경하면 된다.

 

변경 전

import React from 'react'; //React를 사용
import ReactDOM from 'react-dom'; //React DOM 사용
import './index.css'; //css
import App from './App'; //App 컴포넌트

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

 

변경 후

import React from 'react'; //React를 사용
import ReactDOM from 'react-dom/client'; //React DOM 사용
import './index.css'; //css
import App from './App'; //App 컴포넌트

//18버전부터 ReactDOM.render 함수가 지원 안됨
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App/>);

import ReactDOM from 'react-dom' -> import ReactDOM from 'react-dom/client' 로 변경하고,

root를 ReactDOM.createRoot 로 선언한 뒤, render()를 이용하여 App 컴포넌트를 랜더링 해주었다.

 

 

3) 결과

ReactDOM.render 를 ReactDOM.createRoot로 변경한 뒤, 경고가 사라졌다.

깔끔하게 경고가 제거되었다.