[React] ReactDOM.render is no longer supported in React 18 에러 해결 방법

console 창에서 아래의 문구와 같은 에러 내용이 나오는 경우 해결 방법입니다

"react-dom.development.js:86 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(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

수정 후 코드

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

수정 전 코드를 수정 후 코드와 같은 형태로 변경하면 console 더 이상 에러가 보이지 않습니다

 

참고

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

React js Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API