React 18에서 ReactDOM.render와 createRoot
- 리액트 버전 18에 와서 평소처럼 npm run 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
-
새로 나온 리액트 18에서는 ReactDOM.render가 아니라, createRoot를 사용해야 한다는 것 같다.
-
리액트 공식문서를 참고하여, 다음과 같이 코드를 바꾸었다.
🍉 참고한 리액트 공식 문서 : https://ko.reactjs.org/docs/concurrent-mode-reference.html#createroot
/* before */
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
- 이전의 코드는 이러했지만, react 18부터는 다음과 같이 작성하도록 하자.
/* after */
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const rootNode = document.getElementById('root');
ReactDOM.createRoot(rootNode).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
reportWebVitals();
-
ReactDOM의 import가 변경되었고, createRoot(rootNode)가 ReactDOM과 render 사이에 들어가게 되었다.
-
위와 같이 코드를 고치니, 에러 메세지가 없어졌다.
Author And Source
이 문제에 관하여(React 18에서 ReactDOM.render와 createRoot), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@citron03/React-18에서-ReactDOM.render와-createRoot저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)