[React]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

React js 프로젝트 작업중 위 스크린샷의 경고가 표시되었다.

이 경고의 경우 ReactDOM.render가 React 18에서 더 이상 지원되지 않을 경우를 의미한다.

때문에 나는 App.js의 초기 세팅이 이전 스타일로 되어있어 변경해주었다.

하단 코드는 react-redux 및 persist 를 사용한 app.js에서 오류코드를 해결한 방식이다.

context-api나 다른 라이브러리를 사용할 경우는 그 다음 블럭 코드를 참고하면 유용할 듯 하다.

//오류난 코드
import React from "react";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import store from "./features/store";
import ReactDOM from "react-dom";
import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from "redux-persist";

export let persistor = persistStore(store);

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>,

  document.getElementById("root")
);
//해결코드
import React from "react";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import store from "./features/store";
import ReactDOM from "react-dom/client";
import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from "redux-persist";

export let persistor = persistStore(store);


 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
         <App />
       </PersistGate>
     </Provider>
   </React.StrictMode>
 );

//일반 오류코드
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
	<React.StrictMode>
    	<App/>
    </React.StrictMode>
);

//해결코드
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);