왕초보를 위한 React Native

React Native Rule

1. react native는 웹사이트가 아니다.
   html이 아니기 때문에 div를 쓸 수 없고 대신 view를 쓴다.
   view를 import 해줘야 함.

2. react native에 있는 모든 text는 text component에 들어가야 한다.
   span, p 등등 쓸 수 없음.

3. view에 style을 사용할 수 있는데 몇가지 사용할 수 없는 property가 있다. (border 등)

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

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

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

StyleSheet를 사용하면 자동완성기능을 지원해줌
status-bar는 third-party 패키지로 시계, 배터리, wifi등 상태표시줄을 의미

Component와 API 차이점

Component는 화면에 렌더링할 항목 (return안에 있는 항목)
API는 자바스크립트 코드 (vibration 등)
reactnative directory
expo package