웰컴 코드

// App.js

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

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

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

해당 코드는 expo init 으로 만들었을때 생기는 Hello world 코드이다.

전체적으로 보면 React 와 비슷해 보일 순 있겠지만 자세하게 뜯어보면 RN는 웹 어플리케이션을 구성하는 언어가 아닌 ios, android 에서 동작하는 네이티브 언어이기 때문에 문법들이 조금씩 다른것을 볼 수 있다.

<View style={styles.container}>
</View>

View 태그는 Html 에서 Div라고 생각하면 된다 RN 에서는 Container 라고 불리운다.

<Text>Open up App.js to start working on your app!</Text>

RN 에서 모든 텍스트 문자열들은 Text 태그 안에 들어가야 한다.

<StatusBar style="auto"/>

StatusBar 는 상태 표시줄이다 예를들면 아이폰 노치 양 옆에있는 배터리 잔량, 시간표시, 인터넷 연결 표시등이 보여지게되는 상단 부분에 해당하는 상태 표시줄이다. style 은 auto, light, dark 등이 있다

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

StyleSheet는 styled-components 와 같은 css 적용해주는 녀석이다. 신기한점은 웹 앱과는 다르게 css에 오류가나면 웹에서는 오류가 난 문장은 빼놓고 실행이 되었지만 RN 에서는 오류메시지가 어플리케이션에 나타나게 된다

<View>
  <View style={{width: 200, height: 200, backgroundColor: "red"}}></View>
  <View style={{width: 200, height: 200, backgroundColor: "green"}}></View>
  <View style={{width: 200, height: 200, backgroundColor: "blue"}}></View>
</View>

리턴문을 다음과 같이 변경을 해봤는데 위와같이 RGB색상이 순서대로 나오는 것을 볼 수 있다. 처음에 해당코드를 본 순간 생각난것이 "아 View 태그는 div 와 같은 역할을 한다고 했으니까 저렇게 한줄씩 나오는구나" 였지만 그게 아니였다.

웹에서 div 의 flex-direction 의 기본 값은 row였지만 모바일에서 flex-direction 의 기본값은 column 이였기 때문에 위와같이 나온것이였다.

또 위와같이 width: 200, height: 200 처럼 View 컨테이너의 크기를 픽셀 단위로 주게되면 기종마다 다른 디스플레이 환경에서는 디자인이 개발자의 의도대로 안나올 수가 있다. 때문에 강제적으로 반응형을 생각하고 만들어야 한다. 그래서 필요한것이 flex다. flex 옵션은 웹 css와 같은 기능을 한다

<View style={{flex: 1}}>
  <View style={{flex: 1, backgroundColor: "red"}}></View>
  <View style={{flex: 3, backgroundColor: "green"}}></View>
  <View style={{flex: 1, backgroundColor: "blue"}}></View>
</View>

위와같이 전체화면(제일 바깥쪽 View)안에서 1:3:1 비율로 맞춰지게된다.
자식View들의 flex는 이해가 쉽게됐는데 부모 flex는 이해해보려고 flex값을 2, 3, 10 이렇게 넣어봤는데도 똑같이 아무반응이없길래 뭐지 ? 하고 0.5를 넣어봤는데 다음과 같은 결과물이 나왔다.

위와같이 부모 style 의 flex는 현재 속해있는 View의 바깥 Component의 영향을 받는것을 알 수 있다.

끝으로 div, a, span 과 같은 태그들은 위에서도 말했듯이 RN은 웹 어플리케이션이 아니기때문에 사용할 수가 없다.