[React-Native] Text strings must be rendered within a text component 에러 해결

문제

React Native에서 문자열(텍스트)을 화면에 보여주고 싶을 땐 반드시 <Text> 태그 안에 넣어야 한다.
HTML에서는 <div>Hello</div> 이런 식으로도 텍스트를 쓸 수 있지만, React Native는 텍스트 전용 컴포넌트가 따로 있기 때문에 다음과 같은 코드는 에러가 난다!

<View>Hello</View> //error

 

해결

<View>
	<Text>Hello</Text>
 </View>

 

결론

 

• React Native는 모든 텍스트는 반드시 <Text> 태그 안에 있어야 한다.
• <View>나 <TouchableOpacity> 같은 레이아웃 컴포넌트는 문자열을 직접 감싸면 렌더링 에러가 발생한다.

 

이번 에러를 통해서 문자열을 사용하려면 무조건 <Text></Text>로 감싸고 이 안에다가 쓰고자하는 문자열을 입력해야 된다는 것을 알게되었다!  다음에는 또 이런 실수를 하지 않도록 해야겠다.