2.1 The Rules of Native

개발/React Native

2.1 The Rules of Native

세크레투스 2023. 5. 31. 18:02

SMALL

1. React Native는 웹사이트가 아니다.

HTML이 아니기 때문에 div는 쓸 수 없다.

대신, View를 사용한다.

View는 container로 우리가 앞으로 만들 모든 것은 View로 만들게 될 것이다.

그래서 항상 import를 해줘야 한다.

2. react native 안에 있는 모든 text는 text component에 들어가야 한다.

react native는 웹사이트가 아니기에 span이나 p를 쓸 수 없다.

따라서, react native안에 있는 모든 text는 text component 안에 들어가야 한다.

만약에 그렇게 하지 않고, View 안에 text를 넣으면 즉시 오류가 발생한다.

3. View 에 style을 적용할 수 있다(이것은 react.js 와 비슷한 부분이다).

하지만, 일부 style은 사용할 수 없다.

예를 들면 border도 사용할 수 없고, 웹에서 사용하던 style을 그대로 가져와서 쓸 수 없다.

그래서 웹과 앱의 style 차이를 공부해야 한다.

하지만, 98% 정도는 사용할 수 있으니, 너무 큰 걱정을 하지 않아도 된다.

4. StyleSheet.create

StyleSheet.create는 object를 생성하는 데 사용한다.

이것은 component를 정리하는데에 유용하지만, 반드시 필요한 것은 아니다.

하지만 대부분이 StyleSheet.create를 많이 사용한다.

왜냐하면 css 자동완성이 지원되고, 한눈에 보기 편하기 때문이다.

css의 class 이름처럼 생각하면 되기 때문에, key 이름은 특정한 네이밍 패턴 없이 쓸 수 있다.

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}>Hello My Name is Yebbi Yebbi Yo~</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

5. StatusBar

StatusBar는 react-native에서 import 하지 않는다.

StatusBar는 제 3(third-party) 패키지이다.

제 3자 패키지는 아주 중요하기 때문에 다음 편에서 따로 다뤄볼 예정이다.

StatusBar component는 화면상에는 없지만 코드상에서는 랜더링 되어지고 있다.

왜냐하면, StatusBar component는 최상단의 시계, 배터리, Wi-Fi를 의미하기 때문이다.

(우리는 지금 브라우저를 사용하지 않는다. react native는 단지 iOS나 Android 같은 운영체제를 구성하기 위한 개발자들을 위한 인터페이스일 뿐이다.)

위의 코드상에서 StatusBar는 Text하단에 있지만, 실제 화면상에서는 그렇게 보이지 않는다.

왜냐하면 StatusBar는 단지 상태바와 소통할 수 있는 방법이기 때문이다.

LIST