[React Native] Introduction

React Native

리액트 네이티브는 운영체제에 명령을 전달한다. bridge 부분 존재
폰 안에 브라우저가 아니다!

(이미지 찾기)

React Native 구성 요소

• Native 파트 : ios,안드로이드같은 OS 파트
• Bridge 파트
• Javascript 파트

각 파트가 유저 행동에 대해 메세지를 주고받는 방식으로 동작 - 브라우저가 없다
자바스크립트는 개발자들이 os와 메세지를 주고받기위한 도구일 뿐
이 전 과정을 위해서 시뮬레이터, java, xcode가 필요하다.

react native 특징
1. <View> = 컨테이너 = <div>
2. 모든 text는 text component <Text> 에 넣어야한다.
3. 일부 style은 사용할 수 없다 - border
4. StyleSheet, Text, View는 import 해야한다.

const styles = Stylesheet.create = {} (자동완성 기능 있음)
리액트에서 하듯이 style = {{~~}}로 따로 쓸 수 있긴 함, 길어지면 미관상 안 좋으니까 따로 쓰는게 좋을 듯

✅ 컴포넌트와 API 차이
컴포넌트 - 화면에 렌더링할 항목, return 안에 있음
API - 자바스크립트 코드, 운영체제와 소통하는 부분, onPress 내용 같은

Third Party

리액트 네이티브 컴포넌트 자체가 많이 간소화 되었음(asyncstorage, navigation등 없어짐)
reactivenative.directory에서 필요한 api나 써드파티 사용함
단점은 커뮤니티에 의존해야 하고 버그가 생겼을 때 기다리거나 직접 고쳐야 함
or expo 패키지 쓰자

Flexbox

import React from "react";
import { View } from "react-native";

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

• view는 기본적으로 flex container이다

• 모바일에서 flexdirection의 기본값은 column이다 (웹에서는 row)

• overflow여도 스크롤 불가

• '레이아웃'은 width, height로 만들지 말아야함 - 반드시 반응형

• 이때, 부모에 반드시 flex 속성 넣고, 자식 컴포넌트에 flex:1 (비율로 나타남 1:1:1)