[앱개발] #2주차 React native & Expo

💻 리액트 네이티브 앱 개발 시, Expo를 사용하면 편리하게 개발할 수 있다.

 

JSX

앱 개발. 리액트 네이티브 앱 개발에서 레이아웃을 잡는 문법 언어

용도에 맞게 사용하면 된다.

구역은 <View>, 글자는 <Text>처럼.

* 앞 글자는 대문자로 작성해주어야 한다.

 

📝 사용할 요소를 react-native에서 꺼내온다.

import {Text, View} from 'react-native';

<View>
	<Text> //여기에 글씨 </Text>
</View>

 

React Native?

자바스크립트 언어 하나로 Android 앱, iOS 앱 모두를 만들 수 있는 라이브러리

물론, 진짜로 자바스크립트 하나만 사용해 개발하기는 어렵다(ಥ _ ಥ)

Android, iOS를 조금씩 알아야만 하는 상황이 발생할 수 있는데..!

이때 필요한 건 Expo

 

Expo?

리액트 네이티브로 앱 개발 시,  Android, iOS 코드를 건드려야 할 상황이 생기면 도와주는 툴 

안드로이드는 플레이 스토어, ios는 앱 스토어에 가서 'expo'를 검색하면 expo 클라이언트 앱을 다운로드할 수 있다.

개발하면서 잘 되어가는지! 확인할 때 굉장히 유용하다.

 

화면 구성 엘리먼트

1) <View>: 화면의 영역을 잡는 엘리먼트

2) <Text>: 문자 작성

3) <ScrollView>: 앱 화면을 벗어날 때 사용하면 스크롤이 가능해져 모든 컨텐츠를 볼 수 있다.

4) <Button>: 버튼 생성

5) <TouchableOpacity/>: 임의의 영역과 디자인에 버튼 기능을 주고 싶을 때 주로 사용

6) <Image>: 이미지 넣기

7) styles: 스타일 주기

8) StyleSheet: 화면 꾸미기[margin,padding, ..]

9) Flex: 영역과 레이아웃 결정 [flex, flexDirection, justifyContent, alignItems]