[React Native 101] #2. Rules & Packages

~2.4까지의 강의

Snack은 브라우저에서 React 앱을 만들 수 있게 해주는 브라우저이다.
브라우저를 통해 바로 React 앱을 만들면 된다.
핸드폰에서 코드를 미리볼 수 있다.

snack.expo.dev 에 들어가면 보이는 화면

 

---

규칙을 몇가지 알아보도록 하자.

App.js

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

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

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

1. React Native는 웹이 아니라서 div 못쓰고 View를 쓴다. 이것은 container이다.
만들 모든 것은 View이고 항상 import해야한다.

2. text는 Text component안에 들어가야한다. 이건 브라우저가 아니라서 span이랑 p가 없다.
그래서 모두 component 안에 들어가야한다.

3. View에 스타일이 있다. 이것은 ReactJS랑 비슷하다. 그러나 일부 스타일을 사용할 수 없다.
왜 StyleSheet.create를 하는 것일까? 이것은 자동완성 기능을 사용한다.

status bar
이것은 React Native에서 import하지 않았다. 이것은 3차 Packages이다. 이것은 다음 비디오에서 다룰 것이다.
시계, 배터리, 와이파이 등을 의미하는 것이다.
이것은 상태바와 소통할 수 있는 방법일 뿐이다.

---

React Native.dev에서 component를 볼 수 있다.
주목해야 할 것은 제공해하는 component이다

우리는 이전에 local storage API를 쓴 적이 있다.
지금은API가 버튼, 이미지, 섹션같은 것이다.

초기에는 최대한 개발자에게 많은 API와 component를 제공하려고 했다.
그러나 유지관리 업데이트가 어려워서 서비스의 규모를 줄였다.

그래서 많은 것들이 community의 도움을 받는다.
expo는 React Native가 패키지를 지원하지 않는다는 것을 안다.
커뮤니티 자체 패키지를 만들어야해서 가져다 써야하는 경우가 있었고,
그래서 엑스포가 패기지를 제공하기 시작했다.

---

지금부터 Layout System을 정복해보록 할 것이다.
flexbox를 사용해야 한다.

App.js

import { View } from "react-native";

export default function App() {
  return (
    <View style={{ flex: 1, flexDirection: "row" }}>
      <View style={{ flex: 1, backgroundColor: "tomato" }}></View>
      <View style={{ flex: 1, backgroundColor: "teal" }}></View>
      <View style={{ flex: 1, backgroundColor: "orange" }}></View>
    </View>
  );
}

몇 가지 예외를 제외하면, 웹 에서와 거의 같은 방식이다.

1. container view가 flex container이다. 기본값은 모두 colum이다.
우리는 모든 view가 flex라는 거슬 배웠고 기본값은 colum이다.

2. 대부분의 경우, 99.8% 너비와 높이에 기반해서 레이아웃을 만들지 않는다.
왜냐면 이것은 스크린 사이즈에 따라서 정말 다르게 보이기 때문이다.
그래서 우리는 반응형 디자인을 생각해야한다.
React Native는 숫자만 생각하면 된다.

완성된 화면