React 17에서 React18 - ReactDOM.render와 createRoot

◾ 새로운 리액트 프로젝트를 생성하고 run을 했더니 이런 콘솔창이 떴다. 

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

 

◾ 리액트 18에서는 ReactDOM.render가 아니라, createRoot를 사용해야 한다고 한다. 

그게 뭐지? 라며... 공식문서 보러 고고 - https://ko.reactjs.org/docs/concurrent-mode-reference.html#createroot

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

 

 

◾ 봐야할 문서부분 캡쳐

 

 

 

◾ 수정한 코드

 

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
import { Provider } from 'react-redux';
import store from './redux/config';

const rootNode = document.getElementById('root');
ReactDOM.createRoot(rootNode).render(
  <Provider store={store}>
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  </Provider>,
);

// 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();

 

현재 쓰고 있는 코드를 가져와서 잡다한 것들도 함께 포함되어있는데..  rootNode 부분을 변경해주면 된다. 

또 다른 방식이 있을까 구글링을 더 해보았다!

 

createRoot를 import 하는 방법도 있다~ 

import React from 'react';
import {createRoot} from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
import { Provider } from 'react-redux';
import store from './redux/config';

const rootNode = document.getElementById('root');
const root = createRoot(rootNode)
root.render(
  <Provider store={store}>
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  </Provider>,
);

// 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();