ReactDOM.render & ReactDOM.createRoot

// Legacy root API
ReactDOM.render(<App/>, document.getElementById("root"))

// New root API
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App/>)

 

차이가 뭘까?

state나 props 변화가 있을 때,

Legacy API는 변수 container가 변경되지 않더라도 계속 렌더링할 때 container를 전달해야 한다.

import * as ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

// Initial render.
ReactDOM.render(<App tab="home" />, container);

// During an update, React would access
// the root of the DOM element.
ReactDOM.render(<App tab="profile" />, container);

 

그에 반면, 새로운 root API는 데이터 구조의 최상위 레벨에 있는 container를 전달하지 않아도 된다.

import * as ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

// Create a root.
const root = ReactDOM.createRoot(container);

// Initial render: Render an element to the root.
root.render(<App tab="home" />);

// During an update, there's no need to pass the container again.
root.render(<App tab="profile" />);

 

2021.07.27

webpack can't find ReactDOM.createRoot()  에러가 발생했다.

원인 : 현재 React version은 17인데 createRoot()를 사용하려면 version 18부터 가능하다.

해결 : npm install react@alpha react-dom@alpha --force  여기서 force flag의 의미는 둘 다 최신 버전으로 업데이트해준다.

 

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

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

https://blog.bitsrc.io/trying-out-react-18-alpha-release-bad9aed12bee