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

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

📖 들어가며

React + Typescript 환경에서 React Testing library와 jest를 이용해서 테스트 코드 작성에 대해서 공부하려는 도중에 오류가 발생했고, 결과적으로 해결하기 위해 해야 할 것은 별 거 아니었지만 힘들게(?) 해결 방안을 찾아서 기록을 해두려고 한다. 

1. 문제 발생

CRA typescript로 패키지들을 설치하고 난 후에 npm test 명령어를 통해서 기본적으로 작성되어 있는 테스트 코드들이 잘 실행이 되는지 확인을 해봤다.

하지만 ReactDOM.render is no longer supported in React 18 오류가 발생했다.

ReactDOM.render is no longer supported in React 18

테스트 코드 자체는 PASS가 되면서 잘 실행이 되었지만 위와 같은 오류 메시지가 매우 신경 쓰였다.

2. 발생 원인

ReactDOM.render는 React 18에서 더 이상 지원되지 않습니다. 대신 createRoot를 사용하세요. 
새 API로 전환할 때까지 앱은 React 17을 실행하는 것처럼 작동합니다.

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

How to Upgrade to React 18 – React Blog

공식 문서에 적혀있듯이 React 18 버전으로 업데이트되면서 ReactDOM.render는 더 이상 지원되지 않는다고 한다.

3. 해결 방법

3-1 첫 번째

먼저 공식문서에 나와있는 예제 코드처럼 index.tsx를 수정해봤다.

import React from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const container = document.getElementById("root");
const root = createRoot(container);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

결과는 실패.

똑같은 오류가 발생한다.

react-dom/client의 type을 찾을 수 없다고 createRoot를 사용할 시 오류가 발생한다. (이렇게 하라면서 어쩌란 거지)

반응형

3-1-1 첫 번째 시도의 해결 방안

리액트 공식 문서는 코드를 React 18로 변환하는 방법을 설명 하지만 TypeScript에 대해 확실히 유형이 지정된 리소스를 업데이트하는 방법에 대한 지침은 없었다.

그래서 @types/react-dom 패키지를 업데이트해야 했다.

npm install @types/react-dom@17.0.14

이 업데이트된 type 정의에는 React 18에 대한 업데이트된 선언이 포함된다.

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

// React 18        
const container = document.getElementById('root') as HTMLElement;
const root = createRoot(container);
root.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>
);

이렇게 해줌으로써 createRoot에 type이 없다는 오류는 해결되었다.

3-2 두 번째

지금까지 한 걸로 끝난 줄 알았는데 npm test를 실행할 시 ReactDOM.render is no longer supported in React 18 오류가 여전히 발생했다.

기본적으로 작성되어 있는 app.test.tsx에서 render() 함수를 사용해서 발생하는 문제였다. 

 

이 문제를 해결하기 위해서는 사용 중인 모든 React Testing library 패키지의 버전을 업데이트해야 된다.

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

각 패키지들을 최신 버전으로 업데이트를 하고 확인해 보면 모든 오류가 없어진 것을 확인할 수 있다.

해결

📕 마무리

해결하고 보니 별 거 아니었지만 너무 삽질을 한 거 같아서 나와 같은 고통을 겪는 사람이 있다면 손쉽게 해결했으면 바라는 마음이다. 그리고 다음에 또 이런 문제가 발생했을 때 참고할 수 있도록 정리를 해둔 것도 이유 중 하나이다.

 

참고:

https://stackoverflow.com/questions/71684417/upgrading-to-react18-and-react-dom18-fails

Upgrading to react@18 and react-dom@18 fails

https://bobbyhadz.com/blog/react-testing-library-reactdom-render-not-supported

(React Testing library) ReactDOM.render no longer supported in React 18 | bobbyhadz