[React] ReactDOM.render is no longer supported in React 18 에러

React v17을 쓰다가 뒤늦게 v18 업데이트 이후에 발생한 콘솔 에러이다.

이제 ReactDom.render는 React v18에서 더이상 지원을 안한다는 내용으로 아래와 같습니다.

ReactDOM.render is no longer supported in React 18

 

타입스크립트를 사용하고 있는 경우 HTML은 null 일 수 없다는 에러가 뜬다면,

! 를 사용해서 container변수값이 null이 아님을 선언이 필요하다.

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

해당 에러에 자세한 내용은 react docs에서 확인하는 걸 추천드립니다.

 

*참조

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html