react native - Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it. 오류

에러는 아니지만 Warning 으로 떠서 원인을 찾으려고 메시지를 읽고 찾아내려니 상당히 불친절한 안내로 원인을 사실 찾기 힘들다.

그래서 검색도 해보고 내가 작업한 내용을 역학조사를 해봤다.

대부분 검색 내용들은 라우터 역할을 한 곳에서 수정하라고 한다. (링크)

<Route path="/movies/list" exact element={ MoviesList } />
//위 코드 대신 아래 코드 방식으로 수정하라고 한다.
<Route path="/movies/list" exact element={ <MoviesList/> } />

하지만 나는 props를 넘겨줘야 하는 구조의 엘리먼트로 저 방식이 안될 뿐더러 갑자기 왜 저것이 문제이지? 하면서 내가 작업한 것들을 되짚어 봤다.

원인은 Swipeable 엘리먼트를 사용하는데 속성으로 하위 엘리먼트를 불러오는 부분 변경에서 문제가 되었다.

//원래 코드
const LeftEmpty = () =>( <View style={{width: 0}}/> );
 <Swipeable
        renderRightActions={ LeftEmpty } > ...

//변경한 코드
const LeftEmpty = () =>( <View style={{width: 0}}/> );
 <Swipeable
        renderRightActions={ () => LeftEmpty } > ...

함수로 호출하는 방식으로 변경했을 때 컴포넌트가 아니라 변수로 되어 있어서 문제였던 것이다. 위 예제는 오류를 보여주기 위해 예시로 작성한 것이고 실제로는 함수로 바꿔야만 하는 코드였다.
결론은 아래처럼 수정해주니 정상 작동되었다.

const LeftEmpty = () =>( <View style={{width: 0}}/> );
 <Swipeable
        renderRightActions={ () => <LeftEmpty/> } > ...

이 주의 메시지는 종종 나타나는 데 진짜 다양한 케이스에서 나타나서 사례가 생길 때마다 업데이트 하려고 한다.

Subscribe
Notify of
guest

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.

0 댓글
Inline Feedbacks
View all comments
TOP