React Native 시작2

<div> 태그등.. 사용할 수 없음. <View> 컴포넌트를 import 해서 사용.

React Native에서 모든 텍스트는 <Text> 컴포넌트에 사용해야 함.

앱에 브라우저가 없기 때문에 <p>, <span>등의 태그가 없음.

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

 

 

<View> 컴포넌트에 텍스트를 적으면 에러가 발생한다.

Text strings must be rendered within a <Text> component라고 에러를 띄움.

위 사이트는 snack.expo.dev라는 React Native를 공부할 때, Test용도로 개발 후, 결과를 브라우저 혹은 핸드폰으로 바로 확인해 볼 수 있는 사이트이다.

 

<View>는 기본적으로 Flex Container이고 Direction은 웹과 다르게 Column이다.

Overflow가 있다고 해서 브라우저처럼 스크롤할 수는 없다.

width, heigt를 이용할 이유가 거의 없다.

  return (
    <View style={{ flex: 1 }}>
    	    <View style={{ flex: 1, backgroundColor: '...' }} />
            <View style={{ flex: 1.5, backgroundColor: '...' }} />
            <View style={{ flex: 1, backgroundColor: '...' }} />
    </View>
  );

 

 

CSS는 style={styles.어쩌고}를 통해 사용한다.

return (
	<View style={styles.container}>
      <Text style={styles.paragraph}>
        Local files and assets can be...
      </Text>
      <Image style={styles.logo} source={require('../assets/snack-icon.png')} />
    </View>
    );

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    ...,
  },
  paragraph: {
    margin: 24,
    marginTop: 0,
    ...,
  },
  logo: {
    height: 128,
    width: 128,
  }
});

 

 

StyleSheet.create는 자동 완성기능 제공, StyleSheet을 사용하지 않아도 CSS는 사용할 수 있음.

return (
	<View style={{
        alignItems: 'center',
    justifyContent: 'center',
    }>
    );

		or

return (
	<View style={styles.container}>
    </View>
    );

const styles = {
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    ...,
  }
};

 

추가로 React Native는 웹에서 가져올수 없는 CSS 프로퍼티들이 있다.

ex) border... 등..

 

 

StatusBar는 폰 상단의 시계, 배터리, 와이파이 같은 상태 표시

import { StatusBar } from "expo-status-bar";
<StatusBar style="auto" />

 

StatusBar는 Expo에도 있고 React Nattive에도 있음.

 

React Native의 구버전에서는 이것저것 다양한 컴포넌트와 APIs가 많았다고 하는데 버그가 많고 문제점이 있어 규모를 축소해서 기능을 제공한다고 함. 로컬 스토리지로 쓰이는 AsyncStorage도 예전에는 있었는데 지금은 사용되지 않고 있다.

공식 문서에 가보면 https://reactnative.dev/docs/asyncstorage

🚧 AsyncStorage · React Native

 

reactnative.directory의 third-party 패키지와 API를 사용하라고 한다. 

https://reactnative.directory/?search=storage

 

근데 Expo팀이 자체적으로 packages와 APIs를 만들기 시작했고(Expo SDK) 여기에는 다양한 컴포넌트와 APIs들이 있음. React Native와 마찬기자로 StatusBar도 똑같이 존재하지만 Expo에서 지원하는 다른 기능들을 사용할 수 있음.

https://docs.expo.dev/versions/latest/sdk/async-storage/

AsyncStorage

 

 

공식문서에서 제공되는 QR코드를 Expo앱으로 찍으면 해당 기능을 바로 사용해 볼 수 있어서 신기하다.

https://reactnative.dev/docs/vibration

Vibration · React Native