[ReactNative] 리액트네이티브 (2) - 기본 구성

App.js

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

export default function App() {

  const [OutputText, setOutputText] = useState("Hi there! 👀")
  function buttonTapped(){
    setOutputText("🎉 Welcome to React Native World!")
  }

  return (
    <View style={styles.container}>
      <Text>{OutputText}</Text>
      <Button title="Click" onPress={buttonTapped} />
      <StatusBar style="auto" />
    </View>
  );
}

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

StatusBar는 모바일 최상단의 시간과 wifi, 배터리 부분을 가리킨다. auto로 설정해두면 알아서 처리해준다.

리액트 네이티브는 div, html.. 등이 없고 return할 수 있는 컴포넌트가 정해져있다. (Text, View, 등..)

Style은 CSS로 주지 않고 react-native에 속해있는 StyleSheet 모듈을 사용해서 스타일을 이끈다.

 

실행화면