react 18 렌더링 변화

2022-03-29 react 18이 릴리즈되었습니다.

ReactDOM.render는 React 18에서 더 이상 지원되지 않습니다. 대신 createRoot를 사용하세요. 새 API로 전환할 때까지 앱은 React 17을 실행하는 것처럼 작동합니다.  자세히 알아보기: https://reactjs.org/link/switch-to-createroot

react-dom: ReactDOM.render은 더 이상 사용되지 않습니다. 사용시 console창에 경고 발생하며,  React 17 모드에서 앱을 실행합니다.

 

경고 화면

 

종속성 업그레이드

npm install react@rc react-dom@rc

 

렌더링 방법 변화 react 17 ->18

// before

const container = document.getElementById('root');
ReactDOM.render(<App />, container);

// after

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App/>);

 

 

적용해보기

 

적용 전

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

 

적용 후 

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(<App />);