React 18에서 ReactDOM.render 사용하지 않고 createRoot 사용

✔️ 필요성

React 18은 더이상 react-dom의 render를 사용하지 않고 createRoot를 사용하기를 권장한다. React 18로 업그레이드 했는데도 ReactDOM.render를 사용하고 있으면 콘솔창에 warning이 등장한다

 

 

 

✔️ 문제 확인

ga-4-react 라이브러리를 함께 사용할 때 createRoot를 어떻게 적용했는지 기록해둔다

 

이게 기존 코드

import ReactDOM from 'react-dom'
import GA4React from 'ga-4-react'

const ga4react = new GA4React(process.env.REACT_APP_GA_CODE)

;(async (_) => {
	await ga4react.initialize()

	ReactDOM.render(
		<React.StrictMode>
			<RecoilRoot>
				<ErrorBoundary>
					<Suspense fallback={<SplashPage />}>
						<App />
					</Suspense>
				</ErrorBoundary>
			</RecoilRoot>
		</React.StrictMode>,
		document.getElementById('root'),
	)
}

 

이게 변경된 코드

import { createRoot } from 'react-dom/client'
import GA4React from 'ga-4-react'

const ga4react = new GA4React(process.env.REACT_APP_GA_CODE ?? '')

;(async (_) => {
	await ga4react.initialize()

	const container = document.getElementById('root')
	const root = createRoot(container as Element)

	root.render(
		<React.StrictMode>
			<RecoilRoot>
				<ErrorBoundary>
					<Suspense fallback={<SplashPage />}>
						<App />
					</Suspense>
				</ErrorBoundary>
			</RecoilRoot>
		</React.StrictMode>,
	)
}