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

react-test-library로 테스트 실행 중 아래와 같은 에러가 발생

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

앱을 실행하는데 문제는 없지만 보기 안좋기 때문에 고쳐보자.

발생 원인

• 리액트 앱의 버전은 React 18이지만, 사용하고 있는 코드는 React 17을 사용하고 있기 때문에 발생한 것이다.

해결 방법

1. 루트 다이랙토리로 이동하여 터미널을 열고

npm install --save-dev @testing-library/react@latest

npm install --save-dev @testing-library/jest-dom@latest

npm install --save-dev @testing-library/user-event@latest

위의 코드를 실행하여 react-test-library를 최신 버전으로 업데이트

2. index.js의 코드를 수정

import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App';

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

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

로 react 18 버전에 맞도록 수정해주고 npm test를 해보면 오류가 없어진걸 확인할 수 있습니다.