[Warning] createRoot from "react-dom/client".

Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".

그저 튜토리얼 시작 코드 파일을 추가해 띄웠을 뿐인데 Warning 메시지가 뜨다니? 냅다 놀라기도 했고 궁금해서 검색해보았다.

버전이 높아지면서 문법이 바뀐 것 같다.

// before
import ReactDOM from 'react-dom';
const root = ReactDOM.createRoot(document.getElementById("root"));

// after
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById("root"));

▲ 위의 코드로 변경해주니 import 사이즈도 확 줄고 warning이 사라졌다.

React의 Concurrent Mode 관련 공식 문서에 작성되어 있는 내용을 (초보자로서) 이해해보면 React v18부터는 해당 문법 및 사용을 지원하지 않는다고 한다.

ReactDOM.createRoot(rootNode).render(component);가 아닌 ReactDOM.render(component, rootNode);로 작성해야 Concurrent Mode를 가능하게 할 수 있다고 한다. 그게 무엇인지는 언젠가 알 수 있기를...

출처: https://ba-gotocode131.tistory.com/100