오늘의 에러

리액트로 프로젝트를 진행하다보니 console창에서

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

이런 warning 메세지를 확인할 수 있었습니다.

이런 warning 메세지가 발생하는 이유를 찾아보니 ReactDOM.render를
리액트 v18부터 사용하지 않기 때문에 나타나는 경고 메세지라고 합니다.

그래서

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

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root'),
);

이런 코드를

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

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

이렇게 변경했더니 기존의 warning 메세지는 사라졌지만

Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"

이 warning 메세지는 지원되지 않는 "react-dom"에서 createRoot를 가져오고 있습니다. 대신 "react-dom/client"에서 가져와야 한다고 한다.

JavaScript와 TypeScript 방법이 다르다던데 저는 JavaScript 방법으로 수정했습니다.

import React from 'react';
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 rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
);

이렇게 수정했더니 warning 메세지가 사라졌습니다.

이 다음에는 TypeScript와 JavaScript방식이 다른점을 찾아봐야겠다.