Text strings must be rendered within a Text component(React Native 자주 발생하는 오류)

에러

Text strings must be rendered within a Text component

Text strings must be rendered within a Text component는 React Native에서 일반적으로 발생하는 오류 중 하나입니다. 이 오류는 보통 Text 컴포넌트 안에 텍스트 문자열을 렌더링하지 않을 때 발생합니다.

React Native개발을 하는 분이라면 자주 겪는 에러인데 이 에러를 처음 접한다면 당활 할 수 있습니다. 웹브라우저에서는 텍스트가 html 문서의 태그 안이나 밖 등 어디에 있어도 렌더링이 정상적으로 되지만 RN앱에서는 이러한 처리가 되지 않기 때문에 Text라는 컴포넌트로 텍스트를 처리하도록 되어있습니다.

그래서 Text로 감사지지 않은 텍스트는 처리 할수 없다는 오류가 발생합니다.

텍스트는 Text컴포넌트로 렌더링

React Native에서 텍스트를 표시하려면 Text 컴포넌트를 사용해야 합니다. 예를 들어, 다음과 같이 Text 컴포넌트 안에 문자열을 넣을 수 있습니다.

<Text>Hello, world!</Text>

그러나 문자열을 다른 컴포넌트에 직접 렌더링하려고 하면 오류가 발생합니다. 예를 들어, 다음과 같이 코드를 작성하면 오류가 발생합니다. (Text가 아닌 View가 사용된 것에 유의)

<View>Hello, world!</View>

에러 해결

위의 코드는 View 컴포넌트 안에서 문자열을 직접 렌더링하려고 하기 때문에 오류가 발생합니다. 대신에 다음과 같이 Text 컴포넌트 안에 문자열을 넣어 주면 됩니다.

<View>
  <Text>Hello, world!</Text>
</View>

Text 밖에 텍스트를 넣은적이 없는데도 위의 에러가 발생하기도 하는데, 잘 살펴보면 그런 부분이 존재하는 경우가 많습니다. 공백문자, 줄바꿈 등이 자동 lint로 인해 수정되면서 첨가되기도 하니 한번 잘 확인해보길 바랍니다.

아래와 같이 ;가 잘못 첨가된 경우.

<View>
  <Component />;
<View>

또는 아래처럼 줄바꿈이 포함된 상태로 lint를 했을때 린트 설정에 따라서 이렇게 수정해주기도 합니다.

<Text>
    Hello, world!{' '}
</Text>

이런 경우, ;, {' '}를 삭제하고 작업하는 프로젝트의 린트 설정을 통해 이런 일이 발생하지 않도록 설정하면 됩니다.

결론

"Text strings must be rendered within a Text component" 오류가 발생하면, 텍스트 문자열을 렌더링하려는 곳에 Text 컴포넌트를 추가하면 됩니다.