TIL : React Native

React Native

: React로 안드로이드와 ios앱을 만들 수 있는 프레임워크이다.

설치하기

expo 프포젝트 생성하기

yarn global add eas-cli
npx create-expo-app test
cd test
eas init --id 고유값

프로젝트 실행하기

yarn start

프로젝트 저장소에 업데이트하기

eas update

React Native 주요 UI 컴포넌트

<View/>  // <div>
<ScrollView/> // 스크롤로 계속 내릴수 있는 <div>
<TextInput/> // <input/>

<Text/> // <p> 
<View><Text>텍스트</Text></View> // 텍스트는 무조건 <Text/>안에 넣기 

<TouchableOpacity/> // 터치에 반응하도록하는 Wrapper
<SafeAreaView/> //상단에 가려지는 부분 아래에 위치하도록 하는 <div>

View 는 기본적으로 flexBox 이며, default flex-direction은 column 이다.

스타일링방법

• inline styling

  import { Text, View } from "react-native";
  
  const App = () => (
    <View style={{ marginTop: 10, flex: 1 }}>
      <Text>React Native</Text>
    </View>
  );

• StyleSheet

  import { StyleSheet, Text, View } from "react-native";
  
  const App = () => (
    <View style={styles.container}>
      <Text>React Native</Text>
    </View>
  );
  
  const styles = StyleSheet.create({
    container: {
      marginTop: 10,
  		flex: 1
    }
  )

• Styled Component ( vscode-styled-components 설치 )

  import { Text } from "react-native";
  import styled from '@emotion/native'
  
  // VS CODE Extension 중 vscode-styled-components 를 설치해야 css styling 자동완성 기능 이용 가능
  const StyledView = styled.View`
      flex: 1;
  	margin-top: 10px
  `
  const App = () => (
    <StyledView>
      <Text>React Native</Text>
    </View>
  );
  

• Tailwind

  import React from "react";
  import { Text, View } from "react-native";
  
  const App = () => (
    <View className="mt-10 flex-1">
      <Text>React Native</Text>
    </View>
  );

오늘은 리액트네이티브를 공부했다. 컴포넌트 이름이랑 스타일 방법이 좀 어색해서 아직은 어려운 감이 있긴 하지만, 몇 번 연습하다보면 금방 익숙해질 것 같다.
그래도 새롭게 웹앱이 아닌 모바일이라 더 흥미롭고 재밌는 것 같다.