Snack

Snack는 react app을 만들수 있게 해주는 온라인 코더에디터이다.

https://snack.expo.dev/

Expo에 로그인이 된상태에서 snack에 들어가면 IOS, 안드로이드, web등의 앱을 동작시킬 수 있는 환경을 아무것도 설치하지 않아도 시뮬레이터를 실행 시킬 수 있게 도와준다.

The Rules of Native

native는 브라우저가 아니기에 HTML에 있는 tag를 사용하는 것이 아니다. 대신 HTML과 비슷한 tag형식인 모바일 전용 tag를 사용하여 개발하게 된다.

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

react-native모듈을 보면 View라는 모듈로 모든 모바일 화면을 구성하게 될 것이다. Text모듈도 마찬가지고 모든 text는 text component안에 사용되어 구성된다.

JSX안에 쓰여진 style을 보면 react.js처럼 스타일을 obj형태로 전달 할 수 있다. 하지만 style도 css에 사용하는 요소로 사용하진 않고 antive가 제공하는 style옵션으로 설정해줘야한다.

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
		border : "1px green dashed" // native에서 지원하지 않는 style이라고 에러를 띄운다.
  },
});

여기서 native가 어떻게 style을 전달하는것에 주목해야한다. StyleSheet.create라는 함수를 통해 우리는 생성된 오브젝트의 style을 사용할 수 있게 된다.

const styles = StyleSheet.create({});

StyleSheet.create함수에 제공하는 인수를 정의할때 함수가 받을 수 있는 properties를 intellisense처럼 동작되어 좀더 쉽게 style옵션을 지정할 수 있다. 즉, native스타일에 직접적으로 obj스타일을 넣거나 변수 스타일로 넣어서 동작이 가능하지만 intellisense의 도움을 더 받을 수 있는 형태로 사용할려고 하면 Stylesheet.create 함수를 사용하면 좋다는 말이다.

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

container 요소를 보면 style이름이 아닌 요소이름이며, css로 비유하면 class이름처럼 지정하여 style에 접근할 수 있다.