[React Native] 날씨앱 만들기 - 2일차

노마드코더 - React Native로 날씨앱 만들기를 바탕으로 작성했습니다.

 

Getting to know Expo

시도하는 기기들이 같은 wi-fi에 연결되어있어야 함

 

expo의 장점 : live reloading, hot reloading

코드 수정 후 저장하는 즉시 expo가 전체 어플리케이션을 reload함

새로고침을 수동으로 하고 싶다면, 시뮬레이터로 가서 command + R 누르면 됨

 

폰에서 개발자 메뉴에 접근하고 싶다면 폰을 흔들면 됨

시뮬레이터에서는 command + D 누르면 개발자 메뉴 열림

 

개발자 메뉴 중 Debug Remote JS

-> 어플리케이션을 느리게 만들 수 있음

-> Google Developer Tools 이용해서 디버그 하는 것을 도와줌

-> 크롬 안에서 앱의 로그를 보여줌

-> 네트워크 요청이나 console log 확인할 때, 크롬으로 작업할 때 사용

   

몇 가지 명령어들

npm run android, npm run ios : expo 어플리케이션을 시뮬레이터에서 실행시켜 줌

npm run eject : 파일들 가지고 직접 작업하고 싶을 때 사용. 모든 configuration 파일을 드러나게 해줌. 다시 되돌릴 수 없고 업데이트 등을 expo 대신 혼자 처리해야 함

 

 

How does React Native Work?

모바일 앱을 만드는 2가지 방법

1. Fully Native

Swift나 objective-c로 ios 앱 만드는 것 - Xcode

Java나 Kotlin으로 android 앱 만드는 것 - Android Studio

 

2. 앱 기반 웹뷰

아주 심플한 앱을 만들고, 그 안에 HTML과 CSS를 넣는 것

앱 안에서 작동하는 웹사이트 같은 느낌

껍데기(Cordova나 PhoneGap에 의해 만들어진 Native)가 있고, 앱을 오픈할 때 보여주는 것들은 HTML, CSS, JavaScript

native 쪽에 예산이 많이 없는 회사들이 사용하는 방법

이미 훌륭한 반응형 웹사이트를 가지고 있고, 몇 개의 native 기능들이 필요할 때 전체 웹사이트를 앱 안에 넣는 방식

그래서 유저가 앱을 오픈했을 때, 반응형 웹사이트를 보는 것

 

React Native가 하는 일은, IOS 또는 Android의 native 엔진에게 Javascript를 이용한 메세지를 보내는 것임

연결을 이어주는 브릿지같은 역할을 함

우리는 자바스크립트를 이용한 컴포넌트를 작성하는데, 컴포넌트 안에는 브릿지가 있음

그 브릿지는 누군가가 작성해놓은 Swift code나 Java code로 iPhone, Android가 이 컴포넌트를 이해하도록 만드는 역할을 함

JavaScript와 폰 사이의 커뮤니케이션을 위해 브릿지가 항상 필요하기 때문에 느린 성능을 유발할 수 있음

그래서 React Native는 컨텐츠만 다루는 것들, 예를 들면 Instagram App이나 Dating App의 사진 가져오기, 좋아요 누르기, 코멘트 작성/삭제, 프로필 업데이트 정도에 적합함

하지만 3D 비디오 게임같은 앱은 브릿지가 느려지지 않도록 코드를 최적화하는데 시간을 많이 써야 하므로 적절하지 않음

 

React Native, iPhone, Android에서는 모든 것이 View임 (<div>같은 거라고 생각하면 됨)

전부 다 View이고, view 안에 모든 것을 집어넣어야 함

React Native에는 조금 다른 규칙들이 있는데, 웹사이트에서 text를 넣을 때 <span>을 쓰는 반면 React Native에서 모든 텍스트는 <Text></Text>안에 넣어야 함

즉, React Native는 <div>와 <span> 대신 <View>와 <Text>를 사용해야 함

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

App.js의 예시

const styles 부분은 StyleSheet API인데, React Native가 CSS 엔진을 구현했기 때문에 사용할 수 있음

하지만 JavaScript Object 처럼 작성해야 함

 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "blue",
    color: "white",
    alignItems: "center",
    justifyContent: "center",
  },
});

코드를 위처럼 수정한 후 저장하면, Hello의 글자색이 하얀색으로 바뀌지 않음

웹사이트였다면, 텍스트는 부모의 color를 얻었겠지만, React Native에서는 불가능함

 

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "blue",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    color: "white",
    fontSize: 80,
  },
});

text에 스타일을 적용하고 싶다면, 위와 같이 작성해야 함

<- 출력 결과는 이와 같음