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

어느 순간 나타난 warning.

React.DOM.Render는 React 18 버전에서 더 이상 지원되지 않음.
대신 createRoot를 사용할 것.
새 API로 변환 전까지 앱은 React 17 버전처럼 동작함.

기존 콘솔에 찍히지 않던 처음 보는 워닝을 발견해 해결함. 리코일 혹은 리액트쿼리를 사용하면서 인덱스 파일을 수정했고, 그 사이 착오로 코드를 잘못 수정한듯함.

기존 index파일

// index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { RecoilRoot } from 'recoil';
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

ReactDOM.render(
  <RecoilRoot>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </RecoilRoot>,
  document.getElementById('root') as HTMLElement
);

수정한 index 파일

// index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { RecoilRoot } from 'recoil';
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <RecoilRoot>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </RecoilRoot>
);

차이점

1. ReactDOM 을 import 해오는 디렉토리의 구조 변경 (17: react-dom -> 18: react-dom/client)
2. createRoot를 사용할 것 (17: ReactDom.render() -> 18: ReactDom.createRoot.render()