[react-native error] Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. 해결 방법

해당 오류는 react-native 환경에서 개발할 때, 많이 볼 수 있는 오류다.

 

이 오류는 불친절하기 때문에, 로그를 봐도 어디서 오류가 났는지 보여주지 않고, 해당 오류만 남게 되는데 알고 있으면 쉬운 오류다.

 

내가 해결했던 처리 절차는 다음과 같다.

 

1. 자바스크립트 표현식 오탈자 체크

 

   1.1 JSX 내부에서 {} (중괄호)로 된, 자바 스크립트 표현식에 오탈자를 체크한다

        {list.arr.map(res => { ...})} 해당 구문에서 중괄호나 소괄호가 빠졌는지 체크해보자.

{list.arr.map(res => {
return(
     <View key={res.key} style={{flexDirection:'row',marginBottom:8,width:312,height:84}}> 
         <View style={{flexDirection:'column',marginLeft:16,marginTop:9,flexGrow:2}}>
             <Text style={[CommonStyles.font_family_NanumGothicBold, {fontSize: 14, color: '#0080ff', lineHeight: 18,marginBottom:8}]}>테스트</Text>
            </View>
        </View>    
    )
})}

 

 

 

 

  1.2 JSX 내부 즉시 실행 함수의 오탈자를 체크한다.

 

        아래에 코드도 위와 같이,     {(() => {   ...     })()} 으로 되어있는 즉시 실행 함수가 존재하는데, 구문에 소괄호나 중괄호가 빠지는 등,

        오탈자가 있으면 해당 오류가 나타날 수 있다.

        

 <View style={{justifyContent:'center',height:40}}>
    {(() => {
        if(step?.status == 100)
            return(<Text style={[CommonStyles.font_family_NanumGothicBold, {color: 'white',fontSize: 14,textAlign:'center', lineHeight: 20,zIndex:4}]}>테스트</Text>)        
        else
            return(<Text style={[CommonStyles.font_family_NanumGothicBold, {color: 'white',fontSize: 14,textAlign:'center', lineHeight: 20,zIndex:4}]}>테스트2</Text>)
    })()}
</View>