React 18 Concurrent Mode

React 17에서 18로의 렌더링 방법 변화는 Concurrent Mode의 도입과 관련이 있음.
React 18에서는 'createRoot'를 사용하여 root를 생성하고, 'render' 대신에 'root.render'를 사용하는 방식으로 변화.

기존의 코드에서 'container'는 주로 HTML 문서 내에서

<div id="root"></div>

와 같이 정의된 부분으로,

document.getElementById('root')

를 통해 해당 HTML 요소를 찾아온다.
: 이 부분은 React 애플리케이션이 마운트되거나 렌더링될 대상이 되는 DOM요소임.

여기서 'container(rootNode)'의 위치는 웹 페이지에서 React 애플리케이션을 표시하고자 하는 위치에 따라 달라지는데, 일반적으로는 HTML 문서의 루트 요소로 정의됨.

React 17

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <React.StrictMode>
    <NotificationList />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

React 18에서는 'ReactDOM.createRoot'를 사용하여 렌더링을 처리해야 함.
그래서 내가 처음에 변경했던 코드는 아래와 같음

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

  ReactDOM.createRoot(rootNode).render(
    <React.StrictMode>
      <NotificationList/>
    </React.StrictMode>,
  );

오류 발생 원인)
이미 'ReactDOM.createRoot'를 사용하고 있는데,'ReactDOM.render'도 사용하고 있기 때문.
React 18에서는 이 두 가지 방법을 섞어서 사용하면 경고가 발생하며, 기본적으로 React 17 모드로 동작하게 됨.
따라서 'ReactDOM.render'를 제거하고 'ReactDOM.createRoot'만 사용하는 코드로 변경.

근데 여전히 오류 발생. 왜냐!
Concurrent Mode를 사용하고 있는데 'React.StrictMode'를 여전히 사용하고 있기 때문. React 18의 Concurrent Mode는 이미 StrictMode의 기능을 포함하고 있으므로 필요 없음.

React 18

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

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

  root.render(
    <NotificationList />
  );

reportWebVitals();

결과