[Tech] React v18, createRoot의 등장

 2022년 3월 29일부로 react version 18을 사용할 수 있게 되었다. v17에서 v18로 업데이트되면서 root API에서 변화가 생겼는데, 이번에 그 부분에 대해서 다뤄볼까 한다.

---

‘root’는?

root는 react가 렌더링 할 트리를 추적하는 데 사용하는 최상위 데이터 구조에 대한 포인터이다.

---

• Legacy root API(v17) : root는 DOM 요소에 연결하고 DOM 노드를 통해서 액세스 했다.
• New root API(v18) : root를 만들어주고, 그것을 렌더링 한다.

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

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

// After
import * as ReactDOMClient from 'react-dom/client';
import App from 'App';

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

root.render(<App />);

API가 변경된 이유는 무엇일까?

• 첫 번째, 레거시 API에서는 컨테이너가 변경되지 않더라도 계속 렌더링에 컨테이너를 전달해야 한다.
• 두 번째, hydrate 메서드를 제거하고 루트의 옵션으로 바꿀 수 있다.