[React] ReactDOM.render is no longer supported in React 18 해결하기

[React] ReactDOM.render is no longer supported in React 18 해결하기

정식으로 React v18이 release 되었습니다. 한번 테스트 해볼 것이 있어 프로젝트를 생성하고 실행하였는데 콘솔 창에 아래 이미지 에러가 발생하였습니다.

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. Learn more: https://reactjs.org/link/switch-to-createroot

이제 ReactDOM.render를 지원하지 않으니 createRoot를 사용해 라고 합니다. 한번 createRoot를 이용하여 에러를 없애보겠습니다.

ReactDom.render 에러 해결하기

JavaScript, TypeScript 프로젝트 모두 해결하는 방법을 알아보도록 하겠습니다.

◆ JavaScript 프로젝트

JavaScript 프로젝트 코드는 변경하기 쉽습니다. 아래 확인해봅시다.

 

- 수정 전

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

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

- 수정 후

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

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

◆ TypeScript 프로젝트

- 수정 전

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

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

- 수정 후 (1)

import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(<App />);

- 수정 후 (2)

import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(<App />);

 

간단하게 에러를 해결해보았습니다. TypeScript의 경우 여러 방법이 있습니다. 저 방법 외에도 있고 더 좋은 방법이 있을 것 같은데 찾아보아야겠습니다.

 

마지막

해당 내용은 틀릴 수도 있습니다. 틀린 내용이 있으면 조언 부탁드립니다.