에러 확인 💥

다음과 같이
저장된 사용자들의 정보를 가져오는 State 인 LoadingUsers 가 있고, React-Native 에서 제공하는
로딩 컴포넌트인 ActivityIndicator 가 담긴 함수가 있다.

만약,
loadingUsers 가 있다면 renderLoading 함수를 불러오고,
그게 아니라면 Null 을 출력하는 형태를 구현하려 한다.

에러를 살펴보면,

No overload matches this call.
Overload 1 of 2, ‘(props: ViewProps | Readonly): View', gave the following error.
Type 'void | Element' is not assignable to type 'ReactNode'.
Type 'void' is not assignable to type 'ReactNode'.
Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
Type 'void | Element' is not assignable to type 'ReactNode'.

해당 에러는,
React 컴포넌트에서 반환하는 JSX 내부의 일부 구문의 형태가
올바르게 작성되지 않은 경우 발생하는 에러라고한다.

먼저,
ActivityIndicator 가 항상 보이게끔
loadingUsers 자리에 true 로 변경 해 주어 확인 해보자.

음…… 😥

renderLoading 함수를 확인 해 보자.

음……. 😩

에러 해결 ✨

에러 메세지와 작성된 코드를 다시 확인 해 보았더니,
컴포넌트가 반환하는 메서드에서 JSX 문법이 틀리게 작성되어있었다.

이는,
모든 함수나 렌더링 메서드는 JSX 를 반환해야하는데,
무엇을 반환할지에 대한 부분이 명시가 되어있지 않았던 상태이다.

반환하고자 하는 View 컴포넌트를 return 문을 통해 반환 하여 사용하니
정상적으로 ActivityIndicator 가 보여지는 것을 확인할 수 있었다 👍

  • True 일 경우 (항상 보여지게)

  • 조건을 통해 배열을 불러오기 전에만 보여지는 경우

Reference 🌊

https://stackoverflow.com/questions/58449813/react-typescript-error-no-overload-matches-this-call
https://dubaiyu.tistory.com/307
https://kyounghwan01.github.io/blog/dev-report/error-report/React/