[React Native] Text Strings must be rendered within a <Text> component

React Native 개발을 하던 중 이런 에러가 발생했습니다.

<SafeAreaView style={styles.container}>
    {correctNumber && (
        <QuizNumber
            currentIndex={currentIndex}
            correctNumber={correctNumber}
            quizList={quizList}
            isStart={!(currentIndex === quizList?.length - 1 && isSolved)}
        />
    )}
    <QuizCategory currentQuiz={currentQuiz} />
    <QuizQuestion currentQuiz={currentQuiz} />
    <QuizSelection
        selections={selections}
        setChoice={setChoice}
        isSolved={isSolved}
    />
</SafeAreaView>

문제가 된 부분은 { } 사이의 부분이었는데요, 

&& 연산자를 쓸 떄 앞에 아래와 같이 표시를 해주니 정상적으로 작동을 했습니다.

{correctNumber !== undefined && (
    <QuizNumber
        currentIndex={currentIndex}
        correctNumber={correctNumber}
        quizList={quizList}
        isStart={!(currentIndex === quizList?.length - 1 && isSolved)}
    />
)}

correctNumber란 변수는 number 값인데요, 첫 번째 코드와 같이 실행해도 원래 실행이 되었는데, 어떤 부분에서 문제가 발생하는지는 확인해봐야할 것 같습니다.

아래 참고에서 본 글에서는 버그 같다고도 얘기가 나오더군요.

 

 

참고

https://github.com/facebook/react-native/issues/23735#issuecomment-511268669

Text Strings must be rendered within a component · Issue #23735 · facebook/react-native