[Error 해결] No overload matches this call.

회사에서 첫 업무를 받았고, 업무를 하는 도중 No overload matches this call. 이라는 오류를 만나게 되었습니다.

구글링을 해보니 상황에 따라 다양한 해결방법이 있는 것 같았습니다.

 

 

일반적으로, type에 오류가 있을 때 많이 발생하는 오류인 것 같았고, 추론되는 type과 같지 않은 type을 가지고 있는 데이터가 매개변수로 전달되거나 리턴값으로 리턴되고 있을 때 많이 발생하는 상황인 것 같습니다.

 

 

저는 직접 제작한 함수에서 이 오류를 맞닥뜨렸는데요, 함수의 리턴값의 Type에 문제가 있는 경우였습니다.

 

 

혹시나 같은 상황에 처한 분이 계신다면 도움이 되길 바라는 마음에 간단히 정리해보겠습니다.

 

---

 

저의 상황은, 위와 같았습니다.

 

매개변수는 props와 ref라는 이름의 변수이고, 이 둘의 type은 문제없는 상황입니다. (type을 정의한 인터페이스명은 보이지 않게 했습니다.)

 

 

하지만 리턴값의 type은 그렇지 못했습니다.

현재 제가 만든 코드에서는 Element 나 Element[] 의 type을 가진 값을 리턴하고 있고,

프로그램 상에서는 ReactElement나 null을 리턴할 것이라 예상하고 있습니다.

 

 

 

현재 저는 div 태그를 원소로 한 배열을 리턴하고 있습니다.

즉, 아래처럼 Element[]를 반환하고 있죠.

 

 

 

 

 

하지만, 이것을 JSX 문법에 맞춰 JSX Element로 바꿔줘야 합니다. (리액트스럽게?)

 

기존의 코드를 빈 Fragment로 감싸줘야합니다. 아래처럼 말이죠

 

 

빈 Fragment로 감싸주면 비로소 원하는 type이 됩니다.