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.

React를 실행하는 과정에 에러가 발생하였는데, ReactDOM.render 는 React18에서 더 이상 사용되지 않는다고 한다.

해결

index.tsx 파일을 바꿔주었다.

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

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

그런데 새로 변경된 방법으로 렌더링할때 <StrictMode>를 추가하면 컴포넌트가 두 번 렌더링 되버린다.

<StrictMode> 를 제거해주니까 한번만 실행되었다.

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

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(<App />);

typescript에서 import ReactDOM from 'react-dom/client' 를 사용하려면
터미널에 npm i --save-dev @types/react-dom 를 입력해서 설치해준다.

Reference

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis
https://dev.to/osmanforhad/react-js-warning-reactdomrender-is-no-longer-supported-in-react-18-use-createroot-instead-until-you-switch-to-the-new-api-1jhh
https://stackoverflow.com/questions/71668256/deprecation-notice-reactdom-render-is-no-longer-supported-in-react-18
https://velog.io/@ehrbs2021/React-18-react-dom-Type-%EC%9D%B4%EC%8A%88