import React from 'react'

개요

---

기존 CRA 프로젝트를 타입스크립트 마이그레이션중 js , jsx 파일들을 ts , tsx 로 변경하면서 일어난 일에 대해서 얘기해본다.

index.jsx 파일

import ReactDOM from 'react-dom/client';
import App from './App';
import './styles/index.css'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);

기존 파일 구문에서 TypeScript를 작성하기 위해 이렇게 작성했다.

import ReactDOM from 'react-dom/client'
import App from './App'
import './styles/index.css'
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(<App />)

이렇게 작성했을때,
JSX element type '...' does not have any construct or call signatures.
오류 구문을 발견하게 된다. 이유는 뭐였을까...

이유

TypeScript에서는 JSX 코드를 해석할 때, React의 도움이 필요하다.
JSX는 React.createElement() 함수 호출로 해석이되는데, 이 함수는 React 모듈에 정의되어있다.
그렇기에 TypeScript는 React 모듈에 정의된 JSX 관련 함수 및 타입에 접근하기위해 React를 import 해야한다.
따라서 오류의 원인은 React를 import하지 않았기에 오류가 발생한 것이다.

해결

---

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './styles/index.css'
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(<App />)

React를 import 해주면 오류는 해결된다.