[React-Native] React-Native (2)

React-Native는 초기에 많은 Component를 제공하고자 했으나, 많은 버그 발생, 유지 관리, 업데이트가 어려워 지원할 수 없게 되어 최소한의 핵심 Component만 제공한다.

React-Natvie가 제공하지 않는 Component, Api 들은 Third Party Package를 사용하여 이용할 수 있다.

** reactnative.directory 사이트에서 원하는 Component, Api를 검색하여 사용할 수 있다.

 

Expo SDK

• Expo SDK란 Expo 팀 자체적으로 react-native에서 지원하지 않는 Component와 Api를 만들어 무료로 제공한다.
• https://docs.expo.dev/versions/latest/ 사이트에서 Expo가 제공하는 Component와 Api를 확인할 수 있다.
• react-native에서 제공하는 Component와 동일한 것이 존재하지만, 사용 함수명, 기능에서 차이가 존재한다.

---

* React-Native 제공 Component

View

• React-Native는 Web이 아니기 때문에 HTML은 물론 <div></div>를 사용할 수 없다.
• <div> 대신 <View>를 사용할 수 있다.
• style 옵션은 HTML에서의 사용법과  유사하지만 사용하지 못하는 옵션들이 존재한다. (ex "border", ...) -> 웹에서 사용하던 모든 옵션을 사용할 순 없다.

사용 방법

import { View } from 'react-native';

• Import 후 사용해야 한다.

---

Text

• React-Native에서 사용하는 Text는 모두 <Text></Text> Component를 사용해야 한다.
• <Text></Text> Component가 아닌 다른 Component를 사용했을 경우 오류(Text strings must be rendered within a <Text> component)가 발생한다.

사용 방법

import { Text } from "react-native";

• Import 후 사용해야 한다.

---

StyleSheet

• StyleSheet.create()는 object를 생성하는데 사용한다.
• StyleSheet.create()는 자동 완성 기능을 제공한다.

사용 방법

import { StyleSheet } from "react-native";

• Import 후 사용해야 한다.

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        Open up App.js to start working on your app!
      </Text>
      <Text
        style={{
          fontSize: 28,
        }}
      >
        test
      </Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

  text: {
    fontSize: 28,
  },
});

const styles2 = {
  container: {
    flex: 2,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
};

• container, text 이름의 obejct를 생성하여 style={styles.{objectName}} 형태로 사용할 수 있다.
• StyleSheet.create()를 사용하지 않고 style = {{}} 형태와 styles2와 같은 형태로 사용할 수 있다.
• styles2 형태는 자동 완성을 지원하지 않는다.

---

* Expo 제공 Component

StatusBar

• status-bar component는 시계, 배터리, Wi-Fi 등을 의미한다.
• IOS 및 Android 운영 체제와 소통하기 위한 Component이다.

사용 방법

import { StatusBar } from "expo-status-bar";

• Import 후 사용해야 한다.

 

* REF

https://nomadcoders.co/react-native-for-beginners