[React] 리액트v18 버전 다운 에러 해결 방법 : Cannot find module 'react-dom/client'

# Cannot find module 'react-dom/client' 에러 해결 방법

 

[문제 상황]

React v18 환경에서 개발을 하다가,

이전 버전(v17 등)으로 다운그레이드 할 경우, 아래와 같은 에러코드를 만나게 된다.

 

 

[에러 코드]

ERROR in ./src/index.tsx
webpack compiled with 1 error
Module not found: Error: Can't resolve 'react-dom/client'

Uncaught Error: Cannot find module 'react-dom/client'

 

 

[문제 원인]

에러코드에서 설명해주듯이,

index.js 파일에서 react-dom/client 모듈을 찾을 수 없기 때문에 발생한 문제다.

 

react-dom/client 는 v18에서 새로 생긴 모듈이다.

React v18 버전부터는 이 모듈을 이용해 DOM을 렌더링 한다.

 

React v18 이전 버전은 다른 모듈(react-dom)을 사용하여 렌더링 한다.

이걸 회귀 시켜주면 된다.(아주 간단하다)

 

 

[해결 방법]

=> 이전 방식의 모듈(react-dom)을 사용하여 DOM을 렌더링 해주면 된다.

비교를 위해 v18 의 렌더링 코드도 주석을 함께 달아두었다.

 

1. ReactDOM을 react-dom 에서 import 해준다.

// import ReactDOM from 'react-dom/client'; // react v18 버전용
import ReactDOM from 'react-dom';  // react v17 버전용

 

2. DOM 렌더링 코드를 수정해 준다.

// react v 18 버전 용
// const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
// root.render(
//   <React.StrictMode>
//         <App />
//   </React.StrictMode>
// );

// react v 17 버전용
ReactDOM.render(
  <React.StrictMode>
        <App />
  </React.StrictMode>,
  document.getElementById('root')
);

---

너무나 깔끔하게 해결 되었길 바란다.