[React18] ReactDOM.render => createRoot 변경된 점

새로 리액트앱을 만들다 보니 이런 에러가 발생했다.

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

ReactDOM.render는 리액트 18버전에서 더 이 상지원하지 않으니, createRoot를 사용하라는 것!

공식문서를 들어가보자.

Concurrent 모드 활성화

createRoot

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

이 createRoot API가 ReactDOM.render(, rootNode)을 대체하고 Concurrent 모드를 활성화한다고 한다.

concurrent 모드?
Concurrent모드는 React 앱이 빠른 반응속도를 유지하도록 하고 사용자의 장치 기능 및 네트워크 속도에 적절하게 맞추도록 돕는 새로운 기능들의 집합체라고 한다.

앞으로 18버전으로 CRA로 앱을 만들면 자동으로 이 API가 쓰이겠지만,
CRA없이 개발환경을 세팅하거나, 그렇지 않더라도 변경된 부분을 알아두고 쓰도록 하자.

Reference

• https://ko.reactjs.org/docs/concurrent-mode-reference.html#createroot