18버전에서 컴파일은 정상적으로 되었으나 ReactDOM.render 지원이 안되다는 에러가 나옵니다.
그래서 아래처럼 변경 했는데, 이부분도 다뤄주시면 좋겠습니다.
<div style="color: #fff1f3; background-color: #2c2525; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">import * as ReactDOM from 'react-dom/client';</div>
<div style="color: #fff1f3; background-color: #2c2525; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div style="line-height: 19px;">
<div>const root = ReactDOM.createRoot(document.getElementById('root')!);</div>
 
<div>root.render(</div>
<div>&nbsp; &nbsp; &lt;React.StrictMode&gt;</div>
<div>&nbsp; &nbsp; &nbsp; &lt;GuGuDan /&gt;</div>
<div>&nbsp; &nbsp; &lt;/React.StrictMode&gt;</div>
<div>&nbsp; );</div>
</div>
</div>
그리고&nbsp;document.getElementById('root') 라고만 하면 아래 에러가 납니다.
뒤에 명적으로 정의"!" 하니 에러가 안납니다.
왜 그런건지 궁금합니다.
<div style="color: #fff1f3; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre; background-color: #403838;">'HTMLElement | null' 형식의 인수는 'Element | DocumentFragment' 형식의 매개 변수에 할당될 수 없습니다.</div>
<div style="color: #fff1f3; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre; background-color: #403838;">'null' 형식은 'Element | DocumentFragment' 형식에 할당할 수 없습니다.ts(2345)</div>
&nbsp;
&nbsp;
&nbsp;

ts는 dom을 몰라서 분명히 존재하는 태그도 null일 가능성을 염두에 두고 있습니다. 이럴때는 어쩔 수 없이 non null assertion을 해야 합니다.

Cộng đồng Hỏi & Đáp của Inflearn

18버전에서의 ReactDOM.render