리액트 버전 18 - Warning: ReactDOM.render is no longer supported in React 18 - React v18

Warning: ReactDOM.render is no longer supported in React 18  해결하기

기존에 React v17로 개발을 하다가 새로운 사이트를 개발하게 되어서 React 18 버전으로 새롭게 create-react-app을 했다.

React 18에서는 ReactDOM.render를 지원하지 않는다는 사실을 모른채 코드를 작성하고 다음과 같은 Warning을 받았다. 

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

!! 😳 놀란 나는 React 공식 사이트에서 react v18에 대해 알아보았다. 

 

👇 참고 ) How to Upgrade to React 18 - 리액트 공식 사이트 Docs 

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

How to Upgrade to React 18 – React Blog

다음은 React 공식 사이트의 코드 예시이다.

// 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" />);

기존의 방식과 달리 creatRoot를 이용해 root를 생성하고 렌더링하는 방식이었다. 

 

그리하여 아래와 같이 코드를 변경하였다. 

 

기존 코드 

// 기존 React v17 코드 
import React from 'react';
import ReactDom from 'react-dom';
import {BrowserRouter} from 'react-router-dom';

ReactDom.render(<BrowserRouter>
    <React.StrictMode>
        <App/>
    </React.StrictMode>
</BrowserRouter>, document.querySelector('#root'));

변경한 코드

// react v18에 맞게 변경한 코드 
import React from 'react';
import { createRoot } from 'react-dom/client';
import {BrowserRouter} from 'react-router-dom';
import App from '../src/app';

const container = document.getElementById('root');
const root = createRoot(container);

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

변경하면 더 이상 위와 같은 Warning은 뜨지 않는다 😆

---

도움이 되셨다면 ♡ 공감