[React Native] 규칙들

View 는 컨테이너 이다. 만들게 될 모든 것들은 다 View 로 만들게 될 것이다.

div 가 아니라 View 만들기 때문에 항상 import 해주어야 한다.

2. Text - react native 안의 모든 text 는 Text 안에 들어가야 한다.

브라우저가 아니기에 span, p 같은 태그들은 존재하지 않는다.

그렇기에 text를 Text 태그 이외에 예를 들면 View 에 집어넣게 되면 다음과 같이 expo Go 에서 에러를 화면에 출력해 준다.

보다시피 따라야 하는 규칙이 있다.

react js 를 브라우저에서 사용할 때에는 p, span, div 를 사용해도 신경쓰지 않는다. 즉 HTML을 써도 된다는 말이다. 하지만 react native 에서는 이러한 사실을 반드시 알고 있어야 한다.

3. View 에는 style 이 있다. react js 에서 하는 것과 비슷하게 사용할 수 있다. 차이점은 일부 style이 허용되지 않는 다는 점이다.

style 에 브라우저였으면 동작했을 property를 줘 보자.

border : "1px green dash"

오류 메세지가 발생함을 확인 할 수 있다. 결론은 웹에서 사용하던 모든 것을 다 그대로 사용할 수는 없다는 것을 의미한다. 98% 정도는 이용할 수 있다.

StyleSheet.create({})
style 의 object를 생성한다.

text : {
	fontSize : 28,
}
*font-size 아니고 JS 로 작성해야 하기 때문에 fontSize 임.

StyleSheet.create 는 굉장히 유용한 자동완성 기능을 제공한다. 또한 스타일 component를 관리하기에도 편리하다. 하지만 필수적인 것은 아니다. 스타일을 적용할 태그 안에서 style = {{}} 의 중첩된 중괄호 안에 property와 값을 넣어주면 동일하게 동작한다. 이렇게 되는 경우 style object 가 꼭 필요치 않기도 하다. (태그 안에 바로 스타일을 적용시켜 줄때에는 반드시 중괄호를 두겹으로 하자, object 를 인자로 받기 때문에 그렇다.

StyleSheet 는 자주 보게 될 것이고 쓸지 말지 선택을 해야한다. 또한 스타일을 분리하는 경우라고 하더라도, StyleSheet가 반드시 필요한 것도 아니다.

그러면 StyleSheet.create() 을 대체 왜 써? 라고 생각이 들지만 이것은 property 의 자동완성과 상관이 있다.

color 를 쓰려고 해도 CSS 자동완성이 지원되지 않는다. 그저 StyleSheet.create 은 단지 object 일뿐이다. 하지만 아주 멋진 자동완성 기능을 지원해준다. 또 style 의 이름을 지을때는 특정한 작명규칙을 따를 필요없이 CSS 의 class 이름을 정하듯이 해주면 된다.
또한 태그 안에 바로 적어주더라도 자동완성은 지원된다. 문제는 style 이 아주 많이 길어질 수가 있다는 점이다.

그래서 보통 사람들은 component를 만들고 후에 style 을 만들어주는 것이다. 따라서 일반적으로 사람들은 스타일은 StyleSheet 에 구분하고 나중에 component 를 위에 써준다.

StatusBar - 일부 component는 단지 iOS와 Android 같은 운영체제와 소통하기 위해 존재한다.

StatusBar 은 react-native 에서 import 하지 않았다.
StatusBar 은 써드파티 라이브러리이다.
third-party-component는 중요하다.

이 컴포넌트는 랜더링 되고 있지만 화면에는 존재하지 않고 있다.

그럼 뭐냐?

StatusBar 은 시간, 배터리,Wi-Fi 를 의미한다.
우리는 브라우저에 있는 게 아니다. react-native 는 단지 개발자를 위한 인터페이스일 뿐이다. iOS 와 Android 같은 운영체제를 구성하기 위해서 말이다.
이 컴포넌트는 상태바와 소통할 수 있는 방법일 뿐이다.

style="light"

를 주고 container 의 backgroundColor 를 검정으로 주자.

전

후

auto 에서 light 로 변함에 따라 흰 배경일 때에는 상태바가 보이지 않았는데 배경색을 바꿔주니 변화를 확인할 수 있었다.

react-native 가 좋은 점 또 한가지는 CSS의 실수를 에러메시지로 출력해 주기 때문이다. 이것은 브라우저에서는 존재하지 않던 일이다. 예를 들어

color = "#red"

라고 실수를 한 상황을 가정했을 때

StatusBar 은
일부 component 와 react-native 가 단지 운영체제와 소통하기 위해 존재함을 보여준다.
이게 흥미로운 이유는 React JS를 경험해 봤다면 render 또는 return 하게 되는 모든 게 화면에 보여져 왔기 때문이다. 여기에서 볼 수 있듯이 몇몇의 component는 화면에 보이지 않는다. 일부 component는 단지 iOS와 Android 같은 운영체제와 소통하기 위해 존재한다.