(rough) React Native와 expo를 활용해 앱 만들기 - 2

리액트 네이티브는 웹사이트가 아님, HTML이 아니기 때문에 div는 쓸 수 없다.
대신에 View가 있는데 이것은 container이다.
이는 항상 import해야한다.

import { StyleSheet, Text, View } from "react-native";

모든 text 는 text component에 들어가야 한다.

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

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

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

StyleSheet.create는 object를 생성하는데 사용하는데 이 부분은 tailwindCSS로 대체해서 사용할 수 있는 방법도 있는것 같다.

예를 들어 text 크기를 변경하려고 한다면

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

작성하고 App에

  <Text style={styles.text}>

를 추가해주면 된다.

또한 StyleSheet를 쓰지 않아도 css를 적용할 수 있는데 사용하는 이유는 CSS자동완성 기능이 매우 뛰어나기 때문이다. 이를 사용할지 안할지는 사용해보면서 고민해보자.

status-bar component는 리액트 네이티브가 아니라 서드파티 패키지인데 이는 시계, 배터리, WI-FI를 의미한다.

이는 웹사이트를 만들때 컴포넌트가 바로 표시되는것과 다르게 IOS나 안드로이드 등의 운영 체제와 소통하기 위한 컴포넌트이다.

https://docs.expo.dev/

레이아웃

리액트 네이티브의 레이아웃은 Flexbox를 사용해야하는데, 이는 웹과 거의 같은 방식이라고 한다.

웹에서는 display:flex 이후 flex-direction을 사용할 수 있었는데 네이티브는 이미 컨테이너뷰가 플렉스 컨테이너이다. 기본적으로 모든 뷰는 플렉스 컨테이너!

게다가 모바일에서는 플렉스 다이렉션의 기본값이 콜롬이다. 웹은 로우인데 말이지

대부분의 경우는 너비와 높이에 기반해서 레이아웃을 만들지 않는다.
이는 사이즈에따라서 너무 다르게 보인다. 반응형으로 만들어야 하기 때문에 많은 스크린에서도 동일하게 보여야 하기 때문이지.

결론적으로는 레이아웃에서는 width 나 height를 사용하지 않는다고 보면된다.

숫자만 생각하면된다. flex 사이즈를 줘야한다.

부모에는 flex: 1
다른 칠드런들도 flex: 1

똑같은 사이즈로 분배가 된다.

이것은 비율로만 표현한것과 같다 사이즈를 구체적으로 적지 않고.

칠드런의 사이즈가 동일하게 조절된다는것을 알 수 있다.

결국 사이즌느 비율을 말해주는것이다.

import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1, backgroundColor: "red" }}></View>
      <View style={{ flex: 1, backgroundColor: "blue" }}></View>
      <View style={{ flex: 1, backgroundColor: "green" }}></View>
    </View>
  );
}

결국 부모의 flex 숫자에 따라 칠드런이 2면 2배 3이면 3배 되는것이다. (다른 뷰가 없을때, 다른뷰가 있으면 비율적으로 계산된다)