[리액트/에러해결] reactdom.render is no longer supported in react 18 해결방법

⚠️ 에러내용

원문

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에서 사용했던 ReactDOM.render라는 코드는 리액트 18 버전에서는 더 이상 지원하지 않기 때문에 ReactDOM.render 코드 대신에 CreateRoot를 사용해라. ReactDOM.render를 사용하면 리액트 프로젝트는 17버전처럼 동작할것이다.

 

❓ 에러발생이유

리액트가 업데이트 되면서 index.js에서 App 컴포넌트를 렌더링할때 사용하던 ReactDOM.render라는 코드를 더 이상 지원하지 않으므로 CreateRoot 코드 사용을 권장하는 메세지다.

 

사실 콘솔창에 에러 메세지가 거슬릴뿐 코드는 제대로 잘 동작한다. 하지만 나는 콘솔창 에러를 참을 수 없으므로 고쳐주겠다...

 

❗️ 해결방법

기존코드 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();

CreateRoot 코드를 사용하는 새 index.js

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

root.render(
  <StrictMode>
    <App />
  </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();