ReactDOM.render 오류잡기

이전에 만들었던 리액트 프로젝트 파일을 재사용하려고 봤더니 콘솔에 이런 오류가 떴다.

 

리액트 18에서는 더 이상 ReactDOM.render을 사용하지 않으니 createRoot를 사용하라는 말

 

공식문서에도 아주 잘 나와있다.

공식문서 예제를 살펴보면

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

 

 

내가 기존에 작성했었던 예전 코드는 아래와 같다.

Before

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

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

 

 

공식문서를 참고하여 코드를 바꿔봤다.

After

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

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

 

타입스크립트 문제...=_=

 

나는 타입스크립트를 사용하며 개발을 하고 있었는데

코드를 바꾸고 나니 다른 에러가 튀어나왔다.

getElementById로 선택한 변수에 null 형식의 인수는 할당할 수 없다는 것

 

해결법

const root = createRoot(document.getElementById('root') as HTMLElement);

as를 사용해서 타입스크립트에게 추론 결과를 정해주면 된다.

 

Type Assertion(타입 단언)

타입 단언은 타입스크립트에게 내가 타입의 결과를 정확하게 알고 있다는 것을 알려줄 때 사용한다.

위와 같은 경우에는 내가 getElementById를 사용할 때 타입스크립트는 "어느 것"이 반환된다는 것은 알고 있지만 정확히 "어느 것"이 반환될지는 모른다.

하지만 나는 언제나 HTMLElement가 반환된다는 것을 알고 있기 때문에 as를 사용해서 명시해줄 수 있다.