[React] React 레거시 root api 오류

오늘 리액트를 처음부터 다시 공부하고자 리액트 프로젝트를 생성 후 테스트하는 과정에서 콘솔에서
위와 같은 에러를 만나 찾아보게 되었습니다.

• 레거시 루트 API : ReactDOM.render. 이렇게 하면 React 17과 정확히 동일하게 작동하는 "레거시" 모드에서 실행되는 루트가 생성됩니다. 릴리스 전에 이 API에 더 이상 사용되지 않으며 New Root API로 전환하라는 경고를 추가할 것입니다.

• 새 루트 API : 새 루트 API가 로 호출됩니다 ReactDOM.createRoot. 이렇게 하면 React 18에서 실행되는 루트가 생성되어 React 18의 모든 개선 사항이 추가되고 동시 기능을 사용할 수 있습니다. 이것은 앞으로 루트 API가 될 것입니다.

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

ReactDOMClient.createRoot(/*...*/);

ReactDOMClient.hydrateRoot(/*...*/);

루트란 무엇인가?

• React에서 "루트"는 React가 렌더링할 때 트리를 추적하는 데 사용하는 최상위 데이터 구조에 대한 포인터입니다. 레거시 API에서 루트는 DOM 요소에 연결하고 DOM 노드를 통해 액세스했기 때문에 사용자에게 불투명해졌다.

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

New Root API에서 호출자는 루트를 생성한 다음 이에 대해 render를 호출합니다.

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

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

// Create a root.
const root = ReactDOMClient.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" />);

자세한 내용은 https://github.com/reactwg/react-18/discussions/5 참고하세요