React Native 날씨앱 - (2) View, Text, StyleSheet

React Native는 리액트와 마찬가지로 자바스크립트로 동작된다.

아이폰, 안드로이드폰에는 자바스크립트엔진이 있어서 자바스크립트를 해석할 수 있으니 리액트 네이티브도 굴러가는 것이다.

 

그러니 리액트와 유사하게 컴포넌트, JSX로 코딩을 하는데 세부적인 게 조금씩 다르다.

예를 들면 리액트에서 쓰던 div, span이 리액트 네이티브에선 View, Text로 쓰인다(이렇게 정해졌기에 따라야 함).

 

View, Text

import React from "react";

<div class="myDiv">
	<span class="mySpan">
		와 리액트! 와!
	</span>
</div>

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

<View class="myView">
    <Text class="myText">
    	와 리액트 네이티브! 와!
    </Text>
</View>

위의 코드에서 윗부분은 리액트, 아래부분은 리액트 네이티브이고 결과는 똑같다.

div == View, span == Text 라고 생각하면 된다.

 

 

StyleSheet

또 리액트 네이티브에서는 CSS 문법을 사용해서 디자인을 할 수 있는데(물론 세부적인 문법, 허용하는 문법이 조금씩은 다르다)

style 객체를 생성해서 style을 주는 방식이다.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>와! 새로운 문법! 새로운 스타일!</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-end",
    padding: 20,
    paddingHorizontal: 30,
    paddingVertical: 100,
    backgroundColor: "#FDF6AA",
  },
  text: {
    color: "#2c2c2c",
    fontSize: 30,
  },
});

 

문법적으로 어려운 것은 없으나 정리할 필요는 있다.

(1) View, Text 태그에서 styles 속성 주기

    <View style={styles.container}>
      <Text style={styles.text}>와! 새로운 문법! 새로운 스타일!</Text>
    </View>

HTML에서 style을 주는 것과 비슷하지만 이 소스코드는 자바스크립트이고 JSX라는 걸 잊지말고 

이쁘게 culry bracket으로 잘 감싸주자.

 

(2) styles 객체 생성하기

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-end",
    padding: 20,
    paddingHorizontal: 30,
    paddingVertical: 100,
    backgroundColor: "#FDF6AA",
  },
  text: {
    color: "#2c2c2c",
    fontSize: 30,
  },
});

create메소드를 사용해서 객체를 생성하고 styles에 할당한다고 보면 된다.

주의할 점은 역시 자바스크립트 객체라는 걸 잊지말고 오브젝트 문법에 맞게 잘 적어주는 정도이다.

 

 

(3) 리액트 네이티브에서 조금 다른 CSS

리액트 네이티브에서 CSS는 일반적인 것과 조금 다른 부분이 있다.

대표적으로 'flex'이다. flex는 앱 구동 화면에서 차지하는 상대적인 비율을 나타낸다.

예를 들어 두 개의 View 가 flex=1 의 속성을 가지고 있으면 전체 화면의 반씩 차지하게 될 것이다(다른 태그가 없다고 가정하면).

 

스마트폰마다 액정의 크기가 다르고 아이패드와 같이 큰 화면에서 앱을 구동하는 것을 고려하여

애초에 어플 레이아웃을 설계할 때는 이 flex속성을 잘 사용해서 설계하자.

 

 

 

+ 추가로 웹과 다르게 column 형태로 flow가 있는 것이 아니라 raw형태로 존재한다.

왼쪽에서 오른쪽으로 태그가 쌓이는 것이 아닌, 위에서 아래로 태그가 쌓이는 형태.

스마트폰은 주로 위아래로 많이 있으니 자연스러운 형태이다.