[React] Version Up (v.18)

1. install library

react 버전 업을 위해 기존 react, react-dom 삭제 후 아래 라이브러리를 설치한다

npm install react react-dom
npm install -D @types/react @types/react-dom

버전 업을 하고 나면 아래와 같은 에러가 발생한다

2. Error

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

index.tsx 에서 사용하고 있는 ReactDOM.render를 ReactDOM.createRoot로 변경하라는 의미로 파악된다

3. Modify index.tsx

Before

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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

After

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

const rootElement = document.getElementById("root");

if (!rootElement) {
    throw new Error("Failed To Find The Root Elemenet");
}

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

rootElement가 null 인지 체크하는 이유는 아래와 같이 버그가 발생하기 때문이다

Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'.
Type 'null' is not assignable to type 'Element | DocumentFragment'.

ref

• https://velog.io/@seungmini/TypeScript%EC%97%90-React18-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0