React Native

: 자바스크립트 언어로 안드로이드 앱과 iOS앱 두 가지 모두 만들 수 있는 라이브러리이다.
이번에 Expo를 이용해 앱 개발을 할 예정이다.
Expo는 Expo 공식 문서와 RN 공식 문서만으로도 앱 개발을 편리하게 해주고, Expo 클라이언트 앱도 제공하여 개발 중인 앱을 실시간으로 확인 가능하다.

1. JSX

1-1. JSX 기본 문법

① 모든 태그는 가져와서 사용하기

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

② 닫는 태그와 자체적으로 닫는 태그 구분하기
③ 모든 엘리먼트를 감싸는 최상위 엘리먼트(태그<>) 사용하기
④ return에 의해 렌더링될 때에는 항상 소괄호로 감싸기
⑤ JSX 문법 밖에서의 주석은 //, 안에서의 주석은 {/* */}으로 사용하기

2. 엘리먼트

2-1. <View></View>

: 화면의 영역을 잡아주는 엘리먼트

• 스타일 문법(StyleSheet)와 같이 사용해야 영역 사용 가능

2-2. <Text></Text>

: 앱에 글을 작성하기 위한 엘리먼트

• 태그없이 문자를 작성하면 오류 발생

2-3. <ScrollView></ScrollView>

: 앱의 화면에서 벗어나는 영역의 경우 스크롤이 가능해지면서 모든 콘텐츠를 볼 수 있는 엘리먼트

2-4. <Button />

: 버튼 클릭 시 팝업이나, 페이지 이동 등 다양한 기능을 실행하는 엘리먼트

• 고유한 속성들을 이용하여 기능 구현 가능
• onPress함수를 연결하여 이벤트 발생

2-5. <TouchableOpacity />

: 임의의 영역에 디자인과 버튼 기능을 추가하고 싶을 때 사용하는 엘리먼트

3. Flex

: 컨텐츠의 위치, 영역의 레이아웃을 결정하는 속성

• flex는 상대적
• 부모 엘리먼트는 디바이스 전체 화면의 영역을 가져간다.
• 같은 위치에 있는 자식 엘리먼트들의 flex 합의 비율대로 영역이 나눠진다.

3-1. flexDirection

: 자리를 잡은 영역의 방향

• row는 가로 방향, column은 세로 방향으로 영역을 배치한다.
• default는 column

3-2. justifyContent

: flexDirection과 동일한 방향으로 정렬하는 속성

• 속성 : flex-start, center, flex-end, space-between, space-around

3-3. alignItems

: flexDirection과 수직한 방향으로 정렬하는 속성

• 속성 : flex-start, center, flex-end, stretch

4. MainPage 구현

5. AboutPage 구현