[React] React 18 createRoot

 

React logo image

 

최근에 npm-check-updates를 사용하면서 이전에 만들어 둔 프로젝트의 React 버전을 업데이트 하였다.

그런데 프로젝트를 수정하기 위해 실행시켜 보면 콘솔창에 다음과 같은 경고가 나타났다.

경고의 내용은 ReactDOM.render는 React 18에서 더이상 지원되지 않기 때문에 createRoot을 대신 사용하라는 것이었다.

그리고 변경하기 전까지는 계속 React 17 환경에서 프로젝트가 실행된다고 한다.

 

해결 방법은 공식 문서에서 볼 수 있었다!

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

How to Upgrade to React 18 – React Blog

 

 

Create React App을 사용하여 생성한 React 프로젝트의 index.js 파일은 원래 이렇게 작성 되어있다. (React17)

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();

 

이 파일을 다음과 같이 수정 해주면 된다. (React18)

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

root.render(
  <React.StrictMode>
	<App />
  </React.StrictMode>
);

reportWebVitals();

이렇게 수정해주면 콘솔창에서 경고가 사라진다. 

 

 

자세한 설명은 다음 사이트 참고하기

https://github.com/reactwg/react-18/discussions/5

Replacing render with createRoot · Discussion #5 · reactwg/react-18