[ReactNative] Text strings must be rendered within a text component 오류 해결 방법

실행 코드

오류가 발생한 코드는 다음과 같습니다.

function RootNavigator() {
  const isLoggedIn = true;

  return <> {isLoggedIn ? <MainDrawerNavigator /> : <AuthStackNavigator />}</>;
}

 

 

오류 메세지

코드를 실행한 결과 'Text strings must be rendered within a text component'라는 오류 메세지가 나타났습니다.

Error: Text strings must be rendered within a <Text> component 오류는 React Native에서 문자열을 렌더링할 때 문자열이 <Text> 컴포넌트 내에 포함되지 않은 경우 발생합니다.

React Native에서는 문자열을 직접 렌더링할 수 없으며, 모든 텍스트는 <Text> 컴포넌트 내에 포함되어야 합니다.

 

 

오류 원인

오류의 원인은 <>와 {} 사이에 있는 공백입니다.

오류가 발생한 코드에서 <>와 {} 사이 공백이 추가되어 JSX를 파싱하는 과정에서 문자열로 해석될 가능성이 있습니다.

이러한 경우 문자열을 <Text> 컴포넌트 없이 렌더링하게 되어 오류가 발생합니다.

 

 

해결 방법

공백을 제거하여 JSX 표현식으로만 구성되도록 합니다. 이렇게 하면 문자열이 렌더링되지 않고 순수한 JSX로만 렌더링됩니다.

function RootNavigator() {
  const isLoggedIn = true;

  return <>{isLoggedIn ? <MainDrawerNavigator /> : <AuthStackNavigator />}</>;
}