React-Native #1 | 규칙

규칙

RN 은 웹사이트가 아니다

마크업

• HTML 이 아니기 때문에 <div>, <span> 는 쓸 수가 없습니다.
• 대신에 <View>, <Text> 가 있습니다.
• <View>
  • 컨테이너 === <div>
  • 앞으로 모든 것은 View 로 만들게 됩니다.
• <Text>
  • 모든 text 는 <Text> (text component) 에 들어가야 합니다.

스타일

• 웹에서의 스타일과 98% 비슷하지만 여전히 다른 부분도 존재합니다.
  • 대표적으로 CSS 보더 속성 사용 불가능
• StyleSheet.create({})
  • Object 를 생성합니다
  • 아주 좋은 자동완성 기능 제공
  • 스타일 컴포넌트를 정리하는데 유익
  • 필수는 아닙니다

서드파티 모듈

• RN 에서 서드파티 모듈도 사용할 수 있습니다.
• 서드파티 모듈을 통해서도 현재 웹사이트가 아닌 모바일앱 개발을 하고 있는 것을 상기할 수 있습니다.
• <StatusBar />
  • Expo 에서 제공해주는 모듈입니다.
  • 모바일 최상단 상태창의 스타일과 연결됩니다.

위의 내용들 예시

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 RN App!</Text>
      <StatusBar style="light" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "black",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 28,
    color: "green",
  },
});