React native - 2

원종서·2021년 9월 30일
0

learning react native

목록 보기
2/2

React native 의 규칙

  1. div 대신 View Component를 사용한다.
  2. 모든 텍스트는 Text Component 안에 있어야 한다.
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>Open asdasdup App.js to start working on your app!</Text>
            <StatusBar style="auto" />
        </View>
    );
}

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

StyleSheet.create를 사용하지 않고 style 오브젝트를 만들 수는 있지만 , 사용하지 않으면 자동완성이 되지 않아 불편하다.

      <StatusBar style="auto" />
      

StatusBar를 rendering 하고 있지만 화면에는 표시되지 않는 것을 볼 수 있다.

이것이 reactJS 와 아주 큰 차이이다.

몇몇 Component는 ios 또는 andriod 운영체제와 소통하기 위한 매개체 이다.

위의 StatusBar 컴포넌트는 운영체제에게 상태바에 대한 설명을 하고 있는 중이다.

그리고 잘 보면 StatusBar 는 react-native 패키지에서 import 해오지 않는다.

과거에는 지원했지만 현제 버전에서는 지원해주지 않는다.

초기 react team은 개발자에게 가능한 많은 기능을 지원해주고 싶었지만 , 많은 기능은 많은 오류를 수반한다는 것을 깨닫고 기본적으로 제공하는 컴포넌트의 수를 줄였다. (물론 빠른 속도와 용량을 고려한 문제가 크다 )

그래서 공식문서에도 보면 오픈 소스 패키지를 사용하라고 명시되어 있다.

그치만 오픈 소스 패키지를 사용하는 것보다 꾸준히 업데이트해 주는 expo 패키지를 사용하는 것이 좋다.

Native Layout

웹과의 차이

  1. View Component 는 기본적으로 display: flex가 설정된다.
  2. flex-direction의 기본값은 column이다.
  3. 박스들의 크기를 width, height로 설정하지 않는다.

큰 틀은 3가지이다.

박스들의 크기 설정 방법은 비율적으로 분활하는 것이다.


0개의 댓글