[0807~0808] React-Native 강의 정리

Section 7 : How to Handle Screen Layout

Layout Systems

: 3가지 종류가 있음.

 

1. Box Object Model

: 높이와 너비, element를 둘러싼 공간을 중심으로 하나의 element를 배치할 때 사용.

 

2. Flex Box : 부모 내에 자식 몇 개의 element들을 배치할 때 사용.

 

3. Position : 부모 내에 하나의 element를 배치할 때 + Box Object Model과 Flex Box를 override 하고 싶을 때 사용.

 

 

◎ Box Object Model

출처 : https://poiemaweb.com/css3-box-model

→ Content와 Padding : Background 색상을 보여줌.

→ Border와 Margin : Background 색상을 보이지 않음.

→ 각각의 요소에 다른 style을 줄 수 있음.

→ 다양한 속성들(아래 표)

 

이름	설명
margin	모든 방면의 margin 값 설정.
marginVertical	위와 아래의 margin 값 설정.
marginHorizontal	왼쪽과 오른쪽의 margin 값 설정.
padding	모든 방면의 padding 값 설정.
paddingVertical	위와 아래의 padding 값 설정.
paddingHorizontal	왼쪽과 오른쪽의 padding 값 설정.
borderWidth	모든 방면의 border의 넓이를 설정.

 

- alignItems : 정렬할 자식 컴포넌트를 감싸는 부모 컴포넌트에 설정하는 StyleSheet 속성.

→ stretch : 디폴트 값. 가능한 한 최대의 너비를 가지려 함.

→ flex-start : 가로를 기준으로 좌측 끝.

→ center : 가로를 기준으로 중앙.

→ center : 가로를 기준으로 중앙.

 

- flexDirection : 자식 컴포넌트들을 세로로 나열할 것인지, 가로로 나열할 것인지 결정.

→ column : 디폴트 값. 자식들을 세로로 나열함.

→ row : 자식들을 가로로 나열함.

⇒ flexDirection의 값에 따라 alignItems도 영향을 받게 됨.

 

- justifyContent : '주축(Primary Axis)'에 따라 자식 컴포넌트들을 배치함.

⇒ 얘도 flexDirection 의 영향을 받음.

→ flex-start : 디폴트 값. 부모 컴포넌트의 위쪽부터 나열됨.

→ center : 부모 컴포넌트의 중앙에 자식 컴포넌트를 위치시킴.

→ flex-end : 부모 컴포넌트의 바닥부터 자식 컴포넌트들을 나열함.

→ space-between : 자식 컴포넌트들 사이 일정한 간격을 두고 배치.

→ space-around : 자식 컴포넌트 사이 + 부모 컴포넌트의 위쪽과 아래쪽 사이에 일정한 간격을 두고 배치.

 

※ 부모 컴포넌트 : alignItems, justifyContent, flexDirection 으로 자식 컴포넌트들을 정렬함.

※ 자식 컴포넌트 : flex, alignSelf 를 통해 정렬을 수행.

 

- flex : 자식 컴포넌트가 부모 내에서 얼마만큼의 공간을 차지할 것인지 결정.

 

const Screen = () => {
    return (
        <View style={styles.viewStyle}>
            <Text style={styles.firstTextStyle}>First Child</Text>
            <Text style={styles.secondTextStyle}>Second Child</Text>
            <Text style={styles.thridTextStyle}>Thrid Child</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    viewStyle: {
        borderWidth: 3,
        borderColor: 'black',
        height: 200,
    },
    textOneStyle: {
        borderWidth: 3,
        borderColor: 'red',
    },
    textTwoStyle: {
        borderWidth: 3,
        borderColor: 'red',
        flex: 1,
    },
    textThreeStyle: {
        borderWidth: 3,
        borderColor: 'red',
    },
});

실제 적용 모습

→ flex는 각 자식 컴포넌트가 갖는 flex값을 더한 후, 그 flex 값으로 부모 컴포넌트의 공간을 일정하게 나누어 할당하게 됨.

 

- alignSelf : 부모 컴포넌트의 alignItems 값을 override함.

→ flex-end, center, flex-start

 

 

Position

: 모든 element에는 'position' 속성이 있음.

→ position 속성은 'relative'를 디폴트 값으로 가짐.

→ position을 'absolute'로 할 경우

: 다른 자식들에게 무시당하게 됨. 부모 컴포넌트의 flex-box 규칙은 지킴. 부모에 설정된 'alignItems : 'stretch'은 무시함.

 

 

Top, Bottom, Left, Right 속성

: element들 사이에 여분의 공간(extra spacing)을 추가하는 데에 사용됨.

→ 이 공간은 모든 element들이 자리잡힌 후에 추가됨.

⇒ 다른 element들은 extra spacing의 추가에 의해 영향받지 않음.

 

※ 한 element가 부모를 전부 덮도록 하는 법?

→ position 속성을 absolute로 바꿈. + 해당 element의 top, bottom, left, right 속성값을 모두 0으로 설정.

⇒ StyleSheet.absoluteFillObject를 이용

 

textStyle: {
	position: 'absolute',
	top: 0,
	bottom: 0,
	left: 0,
	right: 0,
}

//위 코드와 아래 코드의 결과물은 같음.

textStyle: {
	...StyleSheet.absoluteFillObject
	//StyleSheet.absoluteFillObject에 설정되어 있는 위 5개의 속성을 그대로 복사
}

---

Section 8 : Putting It All Together - Restaurant Search App

React-Native 프로젝트 생성 방법

1. expo-cli : App 개발에 많이 쓰이는 기본적인 기능들(아이콘, 비디오, 카메라 등)을 미리 추가해놓음.

npx expo-cli init [프로젝트 이름]
//expo-cli 프로젝트를 새로 생성

 

2. react-native-cli : 디폴트 CLI. expo-cli와 달리 위 기능들을 추가하는 작업이 따로 필요함.

 

 

React Navigation

: App 내 Navigating을 위한 다양한 object를 제공.

1. Drawer Navigator : 왼쪽에 Drawer 메뉴바를 제공하는 Navigator.

2. BottomTabNavigator : 아래쪽에 메뉴바를 제공하는 Navigator.

3. StackNavigator

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import SomeScreen from './src/screens/SomeScreen';

const navigator = createStackNavigator({
	//첫 번째 매개변수 : 띄울 스크린 컴포넌트 객체가 들어감
	//Screen은 SomeScreen을 가리키는 key가 됨. key는 마음대로 설정 가능.
	Screen: SomeScreen
}, {
	//두 번째 매개변수 : Option
	initialRouteName: Screen, //앱이 시작되면 가장 처음으로 나올 화면
	defaultNavigationOptions: {
		//각각의 화면에 사용될 option
		//ex) 상단 바
		title: 'Title' //상단 바에 띄울 텍스트
	}
});

export default createAppContainer(navigator);

 

※ github.com/expo/vector-icons

: 이런저런 아이콘들이 있음.

→ 따로 뭘 설치할 필요는 없음.

//ex)
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Feather } from '@expo/vector-icons';

const Screen = () => {
    return (
        <View>
            <Feather name="search" size={30} />
        </View>
    );
};

 

 

TextInput

→ onEndEditing : 입력이 완료된 후 호출됨.

<TextInput
	style={styles.inputStyle} placeholder="Search"
	placeholder="Search"                
	onEndEditing={() => console.log('submitted')}
/>