createRoot를 import하는데 에러메시지가 표시됩니다

Question

create-react-app을 사용해서 앱을 만들고 있습니다. React 18로 업데이트하고 최상위 index 파일을 다음과 같이 수정했는데 // index.js import React from react; import ReactDOM from react-dom; import { createRoot } from react-dom/client; import App from ./App; const rootNode = document.getElementById(root); const root = ReactDOM.createRoot(rootNode); root.render( ); Warning: You are importing createRoot from react-dom which is not supported. You should instead import it from react-dom/client라는 에러메시지가 표시됩니다. createRoot를 사용하도록 수정하는 게 아닐까요? 대안이나 해결방법이 있을까요?

이은재 · Answer

안녕하세요. createRoot를 import해서 꺼내쓰는 방식이 약간 잘못된 것 같습니다. 지금은 react-dom을 import한 ReactDOM에서 createRoot를 사용하고 계시는데 react-dom/client를 import 하신 것에서 createRoot를 사용하셔야 할 것 같아 보여요.

공식문서 예제에는 import를 다음과 같이 하고 있습니다. 이런식으로 사용하시면 될 것 같아요.
https://reactjs.org/docs/react-dom-client.html

import * as ReactDOM from react-dom/client;
const root = ReactDOM.createRoot(rootNode)

바꾸게 된 계기를 설명한 글에 보면 server와 구분해서 ReactDOMClient로 import를 하기도 하는데(https://github.com/reactwg/react-18/discussions/125). 이름은 편하신 방법으로 선택해서 import하시면 될 것 같습니다.