[React X TS] root설정시 타입에러가 발생한다면?

React를 사용할 때 렌더링 될 root를 지정하기 위해 index.js에서 루트를 설정해줍니다.
이때 TS를 함께 사용하기 위해 tsx로 확장자를 변경하면 위와 같은 에러를 만날 수 있습니다.

이는 에러내용대로 rootElement가 null일 수도 있기 때문에 그에 대한 타입을 처리해달라는 에러입니다.

어떤 이유로 인해 실제로 루트요소가 null이 될 수도 있으므로 Type Assertion을 사용하기 보다는
if 조건문을 통해 rootElement를 찾지 못한다면 에러가 발생되도록 처리해주는것이 좋습니다.

• index.tsx

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

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

// ✅
if (!rootElement) throw new Error('Failed to find the root element');

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