[react-native] 드디어 해결!! Text strings must be rendered within a <Text> component 에러

 

 

 

디테일페이지를 만들기 위해 메인 페이지를 복사해서 만들다가 갑자기 아래같이 에러가 생겼다.

 

 

아니 <Text>안에 잘 썼는데 왜!!!

1시간동안 구글링한 결과 해결방법은 5가지 정도이다.

 

 

 

 

1. return() 안에 세미콜론(;)이 있는지

<View>태그 안의 <Text>태그 끝에 세미콜론이 불어있어서 에러

 

 

 

 

2. App.js의 return() 안에 주석(/* */)이 있는지

App.js의 return()안에 주석이 있어서 에러

 

 

 

 

3. 태그 사이 빈 공간(space)가 있는지

<Button>과 <Text> 사이에 불필요한 빈공간이 있어서 에러

 

 

 

 

4. 코드에 열리지 않은 괄호, 중괄호가 있는지 ( (), {}, <> )

짝이 맞지 않는 중괄호 때문에 에러

 

 

 

 

 

5. 'react-native' 대신 'react-native-web'에서 속성을 가져오는지

기본 속성을 react-native-web으로 가져오고 있어서 에러

 

 

 

 

 

6. 상태 개체를 빈 문자열로 초기화했는지

상태가 객체가 되려면 처음에 null로 설정해야 한다.

 

 

 

 

 

 

참고 : https://stackoverflow.com/questions/52368342/invariant-violation-text-strings-must-be-rendered-within-a-text-component

Invariant Violation: Text strings must be rendered within a <Text> component

 

 

 

 

 

 

나는 5번째 케이스였고... 

잘 썼는데 Text 에러가 난다면 코드를 잘 한번 더 살펴보시길...