[React Native로 날씨앱 만들기] #0.4 Getting to know Expo ~ #0.5 How does React Native Work?

이 글은 노마드 코더 님의 [ React Native로 날씨앱 만들기 ] 를 수강하며 작성하였습니다.

 

#0.4 Getting to know Expo

휴대폰에서 앱을 실행해보기 위해서는 우선 폰과 컴퓨터가 같은 와이파이에 접속해있어야한다. 

 

splash 스크린은 assets > splash.png에서 바꿀 수 있다. npm start로 시작하면 브라우저에 현재 작동중인 시뮬레이터와 앱을 실행중인 기기의 목록이 뜬다. 만약 같은 와이파이에 접속되어있지 않으면 에러가 뜨게 된다.

 

이제 live loading과 hot reloading으로 실행시켜보자. 만약 폰에서 개발자 모드를 실행시키고 싶으면 폰을 흔들어야한다.

 

#0.5 How does React Native Work?

 

모바일 앱을 만드는 여러가지 방법에는 세가지가 있다. 

1. 첫번째는swift나 object-c로 ios를 만들거나 java로 android를 만드는 것이다.
2. 두번째는 앱 기반 웹 뷰를 만드는 것이다. 간단한 앱을 만들 때 사용될 수 있다. 앱 안에서 작동하는 웹사이트라고 볼 수 있다. 알림, 푸쉬같은 것들을 웹사이트에 넣는다. 아마존 사이트가 이렇다.
3. 마지막으로 react native 방식이다. 안드로이드나 ios모두 자바스크립트를 실행할 수 있다. 이 사이의 브릿지가 존재한다.

안드로이드나 ios 모두는 view를 사용한다. 리액트 네이티브는 브릿지 때문에 기존의 안드로이드나 ios에서와는 다른 것을 사용한다. 

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',
  },
});

위에서 볼 수 있듯이,  <View>나 <Text> 같은 것들을 쓴다. 그리고 하단의 styles는 StyleSheet를 쓴다.

안드로이드와는 다르게 부모속성을 상속받지 않기 때문에 속성을 따로 선언해서 넣어주어야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 style={styles.text}>hello!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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