[React Native] React Native로 날씨앱 만들기 (4) - React Native Work

모바일 앱을 만드는 방법은 3가지가 있다.

1. 완전 native 방식
Xcode - Swift or Object-c 로 iOS 앱 만들기
Android studio - Java or Kotlin 으로 Android 앱 만들기

2. 앱 기반 웹뷰를 만드는 것
매우매우 심플한 앱을 만들때.
    

3. React Native 방식
Android, iOS 둘 다 JavaScript 엔진을 가지고 있기 때문에 JavaScript를 실행할 수 있다. 
JavaScript를 웹 사이트에서 실행하고, 구글 크롬, 사파리, iOS, Android 
React Native가 하는 일은, JavaScript를이용해서 iOS 또는Android 의 네이티브 엔진에게 자바스크립트를 이용한 메시지를 보내는것. 연결을 이어주는 브릿지 같은 느낌.

import 된 애들을 브릿지라고 생각하면된다.

 

React Native는 애플리케이션을 만들기엔 좋다. (ex.인스타그램 사진 가져오기, 좋아요, 코멘트, 프로필)
하지만 컨텐츠만 다루는 것에는 최선이 아니다. (ex. 게임, 증강 현실)

=> React Native는 Javascript와 폰의 코드 사이의 커뮤니케이션을 쉽게 하려고 만들어진것이다.

React Native, 아이폰, 안드로이드 세상에서는 모든게 view이다.
그리고 그 view안에 모든걸 집어넣어야한다.

 

React Native는 몇가지 다른 규칙이 있다.

웹사이트에서 text를 넣을 때 보통<span>을 이용하지만 React Native에서 모든 text는 <Text> 컴포넌트 안에 들어가야 한다.
또 <div> 를 쓰지 않고 <View> 컴포넌트를 사용한다.

css는 이처럼 StuleSheet API에서 Javascript 오브젝트 처럼 써야한다.

 

만약 여기에 color: "white" 로 쓰면 어떻게 될까?

 

? 웹사이트의 css 처럼 작동하지 않는다.

만약 이게 웹 사이트였으면, <Text>는 부모(<View>)의 color를 얻었을 것이다.

안먹히는 이유는 간단하다. 이건 웹사이트가 아니라 React Native 이다. 애초에 규칙이 다르다.

따라서 <Text>에 스타일을 먹이고 싶다면 따로 지정해 줘야한다.

 

 

String에 px 은 들어가면 안된단다. px를 쓸거면 ""를 지우고 숫자만 써라. 위처럼 에러도 앱에서 알려준다.

 

 

잘 적용이 되었다.

 

이제 React Native가 대충 어떤식으로 작동하는지 이해했다.

다음 포스트는 본격적으로 날씨 앱을 만들어볼 것이다.