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

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17
경고: ReactDOM.render는 React 18에서 더 이상 지원되지 않습니다. 대신 createRoot를 사용하세요. 새 API로 전환할 때까지 앱은 React 17을 실행하는 것처럼 작동합니다.

리액트 앱의 버전은 React 18이지만, 사용하고 있는 코드는 React 17을 사용하고 있기 때문에 발생한 것이다.

ReactDOM.render를 리액트 v18부터 사용하지 않기 때문에 나타나는 경고 메세지이다.

기존 코드

import React from "react";
import ReactDOM from "react-dom";
import { RecoilRoot } from "recoil";
import { ThemeProvider } from "styled-components";
import App from "./App";
import { theme } from "./theme";


ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <ThemeProvider theme={theme}>
        <GlobalStyle />
        <App />
      </ThemeProvider>
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById("root")
);

변경 코드

import React from "react";
import ReactDOM from "react-dom/client"; // 변경 부분
import { RecoilRoot } from "recoil";
import { ThemeProvider } from "styled-components";
import App from "./App";
import { theme } from "./theme";

// 변경 부분
const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <ThemeProvider theme={theme}>
        <GlobalStyle />
        <App />
      </ThemeProvider>
    </RecoilRoot>
  </React.StrictMode>
);