[React] Vite 프로젝트에서 ReactDOM.render Warning

Remember Plus 프로젝트를 진행하던 중 콘솔창에서 다음과 같은 warning 이 발생했다.

vite를 이용한 프로젝트가 처음이라 warning을 해결한 과정을 정리해보려고 한다.

 

warning message

 

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>

 

warning이 발생한 코드

 

//main.tsx
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  
    <BrowserRouter>
      <App />
    </BrowserRouter>,

  document.getElementById('root')
);

 

warning 발생 이유

 

React 18버전 이상에서는 createRoot 메서드를 사용함

React 17버전 이하에서는 ReactDOM.render()를 사용함

우리 프로젝트에서는 18.2.0 버전의 ‘react’와 ‘react-dom’ 을 사용하고 있는데 ReactDOM.render()를 사용했기 때문에 warning이 발생한 것이다.

그렇다면 ReactDOM.render() 대신 createRoot 메서드를 사용하면 warning이 사라질까?

결론은 아니다.

createRoot 메서드를 사용해봤더니 createRoot 메서드가 존재하지 않는다는 에러가 발생했다.

 

‘react’와 ‘react-dom’ 둘 다 18.2.0 버전 인데 ‘createRoot’ 메서드를 사용할 수 없는 이유

 

프로젝트에서 ‘vite’ 빌드 도구를 사용중이기 때문

원래 vite를 사용중이 아니라면 아래와 같이 createRoot 메서드를 사용했을 때 warning 없이 잘 작동한다.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

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

그렇다면 vite 프로젝트에서는 createRoot 메서드를 사용하기 위한 두 가지 방법을 알아보자.

 

1. ‘vite.config.js’ 파일 수정하기

 

vite 프로젝트에서 createRoot 메서드를 사용하고 싶다면 ‘vite.config.js’ 파일을 다음과 같이 수정하면 됨

// vite.config.js
export default {
// ...다른 설정들...
esbuild: {
jsxFactory: 'React.createRoot',
// jsxFactory를 React.createRoot로 설정합니다.
},
};

 

2. createRoot 메서드 import 후 사용하기

 

아래와 같이 crateRoot 메서드를 react-dom/client에서 import한 후 사용하면 에러 없이 메서드를 사용할 수 있고, warning도 사라지게 된다.

//main.tsx
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

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

const root = createRoot(document.getElementById("root") as HTMLElement);

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

위 두 가지 방법 중 하나를 사용한다면 vite와 React 18버전 이상을 사용한 프로젝트에서도 warning이 발생하지 않을 것이다.