Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead.

https://ko.reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

React 18버전에서 ReactDOM.render는 더 이상 사용되지 않으며, 경고를 발생시키지만 호환 모드에서 실행할 수는 있는 상태라서
경고 문구를 해결하기 위해 위의 주소로 들어가았다.

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);

기존 index.js 코드

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

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

React 18. createRoot 변경

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

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

// 또는 아래 코드와 같이 작성
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import './index.css';

const rootElement = createRoot(document.getElementById('root'));
rootElement.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);