[React] ReactDOM.render vs create Root in React 18

리액트 18에서 ReactDOM.render 함수를 사용하고 npm start를 했는데, 다음과 같은 에러 메시지가 콘솔창이 띄워졌다.

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

How to Upgrade to React 18 – React Blog

 

새로 나온 리액트 18에서는 ReactDOM.render가 아니라, createRoot를 사용해야 한다는 에러 메시지이다.

리액트 공식 문서를 참고하여, ReactDOM.render를 createRoot로 변경하였다.

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

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

 

변경 전

...
import ReactDOM from 'react-dom';

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

변경 후

...
import ReactDOM from 'react-dom/client';

const rootNode = document.getElementById('root');

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

< 변경 사항 >

1. ReactDOM의 import가 from "react-dom" ➡ "react-dom/client" 변경

2. createRoot(rootNode)가 ReactDOM과 render 사이에 삽입

 

// 참고

createRoot를 사용한 React 18에서 StrictMode를 사용하면, react-router-dom v5가 제대로 작동하지 않는 오류가 있다.

 따라서, react-router-dom v5를 react 18에서 사용하고자 한다면, StrictMode를 사용하지 않거나, react 18에서는 최신 버전의 react-router-dom를 사용하자.