ReactDOM.render는 React 18에서 더 이상 지원되지 않습니다.

그래서 React 18 출시 이후 첫 번째 React 애플리케이션을 부트스트랩했습니다(출시 6일 후).

내 콘솔을 확인했을 때 찾을 것으로 예상하지 못한 오류가 표시되었습니다(적어도 내 생각에는).

오류가 발생하는 이유는 무엇입니까?

위의 오류는 React v18에서 React.render() 대신 React.createRoot를 사용하여 애플리케이션의 루트를 렌더링할 때 표시됩니다. 유형(Typescript)을 사용하도록 애플리케이션을 부트스트랩했는지 여부에 따라 다릅니다.

어떻게 고치는 지.

index.tsx 또는 index.js 파일에 다음 코드를 작성합니다.

react-dom/client 하위 모듈에서 ReactDOM 가져오기

Import ReactDOM from 'react-dom/client'

index.js or index.tsx 파일의 구조를 변경하십시오. 그러나 이것은 Typescript 사용 여부에 따라 다릅니다.

Typescript 사용

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import reportWebVitals from './reportWebVitals'

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

reportWebVitals()

자세히 보면 어딘가에 createRoot가 있는 것을 볼 수 있습니다. 봤어? 😏 다음에도 주목해주세요 :)
React 팀은 다음을 지원하기 위해 createRoot로 변경합니다.
React 앱의 동시 모드.

Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed.

concurrent mode에 대해 자세히 알아보기

일반 Javascript 사용

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import reportWebVitals from './reportWebVitals'

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

reportWebVitals()

추가 정보.

React 18에서 React 라우터 사용
새 파일 설정을 사용하는 경우 index.js 또는 index.tsx 파일을 설정하는 방법입니다.

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

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

reportWebVitals()

내가 할 수있는 방식으로 당신을 도왔기를 바랍니다.

건배.

추신: 이것은 내가 쓴 첫 번째 기사입니다. 성장을 위해 🎉