JSX element type '~’ does not have any construct or call signatures.

빠르게 이 에러의 원인을 파악하고 싶은 분이라면 아래 링크에 들어가 up vote 가 가장 많은 답변을 보시면 될 것 같습니다.

What does the error "JSX element type '...' does not have any construct or call signatures" mean?

리액트에서 컴포넌트는 class 혹은 함수 형태이다. class 컴포넌트가 사용될 때를 예로 들자면, 우리가 가져와 쓰는 그 컴포넌트는 그 클래스의 instance 가 아닌 클래스 자체 === 생성자 가 사용된 다고 볼 수 있다. js에서 클래스는 생성자와 같기 때문에 생성자가 사용 된다고도 볼 수 있다. 표현이 모호한데, 우선 아래에서 class 컴포넌트의 예를 한번 보자.

/** Child Component */
class Child extends React.Component {
	constructor(props){
		super(props)
	}

	render(){
		/** */
	}
}

/** Parent Component */
/* use like this ✅ */
return <Child data={data}/>
/*...*/

/* not use like this ❌ */
let ChildComponent = new Child(data);
return <ChildComponent />

위의 예제를 보면 당연히 “use like this” 와 같이 평소 사용하고 있음을 확인 할 수 있다. 그렇기에 컴포넌트는 클래스 자체(생성자) 로써 사용 되야 함을 알 수 있다. 그렇다면 함수형은 어떠할까? 클래스 컴포넌트가 사용되는 방식을 생각해보면, 함수 형 컴포넌트 또한 함수를 호출해 사용하는 것이 아닌 함수 자체(함수형 컴포넌트에서는 parameter 로 props 를 받는 부분이 생성자라고 할 수 있겠다. 생성자 함수와 같은 형태라고 볼 수 있음). 를 사용한다는 것을 알수 있다. 이역시 예제를 보면 좀더 와닿을 것 이다.

/** Child Component */
function Child (props){
	return <div>{props.data}</div>
}

/** Parent Component */
/* use like this ✅ */
return <Child data={data}/>
/*...*/

/* not use like this ❌ */
let ChildComponent = Child(data);
return <ChildComponent />

이 시점에서 에러를 해석하자면 JSX 타입의 엘리먼트가 생성자나 call signatures 를 가지고 있지 않다는 뜻이다. (Call Signature란 함수의 매개변수와 반환 값의 타입을 모두 type으로 미리 선언하는 것이다.) 그리고 이 에러는 Typescript로 React 의 고급 기능 중 HOC 예제를 만들다가 접했다.

import { useState } from "react";

const hocTest = (InnerComponent:React.ReactElement) => { //에러난 곳
  return (props: any) => {
    return <InnerComponent {...props} />;
  };
};
export default hocTest;

HOC 는 위와 같이 parameter 로 컴포넌트를 받아, 재사용할 로직을 실행시키거나, 새로운 props 를 내려주고 해당 컴포넌트를 반환 하는 형태를 띈다.

위의 과정에서 해당 에러가 발생한 것인데, 컴포넌트를 인자로 받을 때 생기는 어쩌면 특수한 에러일 거라고 생각 했다.

앞서 살펴본 바를 토대로 생각해보면, 인자인 컴포넌트가 class 자체(=== 생성자) 이거나 함수 자체인지 알 수 없다고 해석할 수 있다. 그렇기에 파라미터의 타입을 React.ReactElement 가 아닌 React.ReactElement 를 반환하는 함수의 타입을 지정해줘야 하는 것이다. 그래서 나는 다음과 같이 에러를 해결 할 수 있었다.

import { useState } from "react";

const hocTest = (InnerComponent:()=>React.ReactElement) => {
  return (props: any) => {
    return <InnerComponent {...props} />;
  };
};
export default hocTest;

Reference
[JSX element type 'Component' does not have any construct or call signatures.ts(2604)] 에러 해결

클래스와 기본 문법