ReactDOM.render는 React18에서 지원되지 않습니다.

문제 발생

npx를 이용해 React 앱을 만든 뒤 index.js에서 ReactDOM.render()를 실행했을때 다음과 같은 경고 메세지가 콘솔창에 뜨는 것을 발견.

---

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.

---

문제 해결

2022년 3월 29일에 출시된 React18 환경에서는 ReactDOM.render()가 사용되지 않는다. 현재 React18 환경에 호환되지 않는 이전 코드들은 호환모드에서 실행되며, 위와 같은 경고 메세지를 콘솔창에 출력해준다.

따라서 이전 버전의 React 버전에서 코드를 작성하거나, React18 버전에 맞게 코드를 업데이트 해야한다.

<script>
  import React from "react";
  import ReactDOM from "react-dom";
  import App from "./App";

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

위의 코드를 React18 환경에 맞게 작성하려면 아래와 같이 수정해야한다.

<script>
  import { StrictMode } from "react";
  import { createRoot } from "react-dom/client";
  import App from "./App";

  const rootElement = document.getElementById("root");
  const root = createRoot(rootElement);

  root.render(
    <StrictMode>
      <App />
    </StrictMode>
  );
</script>

▶ 자세한 내용은 여기서