[React ] 업데이트로 인한 오류 수정

* 인프런의 "따라하며 배우는 노드, 리액트 시리즈 - 기본 강의" - #29, 30 로그인 페이지 내용 중 오류 발생

 

 

오류 1) ReactDOM.render is no longer supported in React 18. Use createRoot instead

- 문제 원인 : 리액트가 업데이트 됨에 따라 ReactDOM 대신 createRoot 사용할 것

 

오류 2) You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"

- 문제 원인 : 리액트가 업데이트 됨에 따라 react-dom대신 react-dom/client 사용할 것

 

 

 

 

[해결방법]

공식 문서 : https://ko.reactjs.org/docs/concurrent-mode-reference.html#createroot

Concurrent 모드 API 참고서 (실험 단계) – React

참고 블로그 :  https://velog.io/@citron03/React-18%EC%97%90%EC%84%9C-ReactDOM.render%EC%99%80-createRoot

React 18에서 ReactDOM.render와 createRoot

 

[해결]

코드 변경 전 

import React from "react";
import ReactDOM from "react-dom"; //오류 1
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import { applyMiddleware, createStore } from "redux";
import promiseMiddleware from "redux-promise";
import ReduxThunk from "redux-thunk";
import Reducer from "./_reducers";

const createStoreWithMiddleware = applyMiddleware(
  promiseMiddleware,
  ReduxThunk
)(createStore);

ReactDOM.render( //오류 2
  <Provider
    store={createStoreWithMiddleware(
      Reducer,
      window.__REDUX_DEVTOOLS_EXTENSION__ &&
        window.__REDUX_DEVTOOLS_EXTENSION__()
    )}
  >
    <App />
  </Provider>
);

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

 

 

 

코드 변경 후 

import React from "react";
import ReactDOM from "react-dom/client"; //오류 1 해결
import "./index.css";
import App from "./App";
// import * as serviceWorker from "./serviceworker";
import { Provider } from "react-redux";
// import "antd/dist/antd.css";
import { applyMiddleware, createStore } from "redux";
import promiseMiddleware from "redux-promise";
import ReduxThunk from "redux-thunk";
import Reducer from "./_reducers";

const createStoreWithMiddleware = applyMiddleware(
  promiseMiddleware,
  ReduxThunk
)(createStore);

const rootNode = document.getElementById("root"); //오류 2 해결
 
ReactDOM.createRoot(rootNode).render(//오류 2 해결
  <Provider
    store={createStoreWithMiddleware(
      Reducer,
      window.__REDUX_DEVTOOLS_EXTENSION__ &&
        window.__REDUX_DEVTOOLS_EXTENSION__()
    )}
  >
    <App />
  </Provider>
);