내일배움단 App2.3
[앱개발 종합반] 2주 3일차 개발일지(2주 4강)
📱TIL App.203
1. 앱 화면 만들기: 구성한 화면 꾸미기, Styles
1) StyleSheet
앞에서 배운 태그들에 스타일을 주기 위해서, StyleSheet 기능을 react-native에서 가져와 사용할 수 있다.
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
justifyContent:"center",
alignContent:"center"
},
imageStyle: {
width:"100%",
height:"100%",
alignItems:"center",
justifyContent:"center"
}
});
위의 예시 코드를 보면, StyleSheet에서 create라는 함수를 가져왔고, 함수에 딕셔너리(Object)를 parameter로 넘겨주는 것을 확인할 수 있다. 딕셔너리의 각 key들은 태그들에 입힐 옷, 변수 styles는 옷들이 정리된 옷장이라고 생각하면 쉽다. 각 태그들에 옷을 입힐 때는, 옷장에서 옷을 꺼내입는 것처럼 style 속성에 변수와 해당 key를 지정해주면 된다.
<View style={styles.container}> </View>
연결 연산자(.)를 사용해 변수명과 key를 연결해 style 속성에 지정해주면, 해당 key에 해당하는 값(스타일)들이 태그에 적용된다.
2) 자주 사용하는 스타일 속성
아래 코드와 주석을 통해 자주 사용되는 스타일 속성들을 알아보자. 전반적으로 속성의 이름들만 조금 다를 뿐, CSS 속성들과 비슷한 부분이 많다고 느꼈다. Style 공식 문서와 정렬 속성 공식 문서를 통해 각 속성과 그 특징들을 익히자!
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.textStyle}>스파르타 코딩클럽!!</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
// flex: 1은 전체 화면을 가져간다는 뜻이다.
flex: 1,
// 영역의 배경 색을 결정한다.
backgroundColor: '#fff',
// 아래 두 속성은 영역 내 컨텐츠들의 배치를 결정한다.
justifyContent:"center",
alignContent:"center"
},
textContainer: {
// 영역의 바깥 공간 이격(떨어진 상태)을 뜻한다.
margin:10,
// 영역 안의 컨텐츠 이격 공간을 뜻한다.
padding: 10,
// 테두리의 구부러짐을 결정한다.
borderRadius:10,
//테두리의 두께를 결정한다.
borderWidth:2,
//테두리 색을 결정한다.
borderColor:"#000",
//테두리 스타일을 결정한다. 실선은 'solid'다.
borderStyle:"dotted",
},
textStyle: {
// 글자 색을 결정한다. rgb, 값 이름, 색상코드 모두 가능하다.
color:"red",
// 글자의 크기를 결정한다.
fontSize:20,
// 글자의 두께를 결정한다. 문자열로 입력하며, 100 단위로 증가한다.
fontWeight:"700",
// 가로 기준으로 글자의 위치를 결정한다.
textAlign:"center"
}
});
2. 앱 화면 만들기: 컨텐츠의 위치, Flex
1) flex
flex란 영역의 레이아웃을 결정하는 속성이다.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.containerOne}></View>
<View style={styles.containerTwo}></View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex:1
},
containerOne: {
flex:1,
backgroundColor:"red"
},
containerTwo:{
flex:2,
backgroundColor:"yellow"
}
});
위 코드에서, 전체를 감싸는 <View> 태그는 flex 값이 1로 설정되어 있고, 이는 ‘전체 화면’이라는 뜻이다. 하위 <View> 태그는 각각 containerOne, containerTwo의 스타일을 갖고 있으며, flex 값은 각각 1, 2로 설정되어 있다. 하위 태그들은 상위 태그의 영역을 나눠 가지게 되는데, 이 비율을 1:2로 설정한다는 뜻이다.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.containerOne}></View>
<View style={styles.containerTwo}>
<View style={styles.innerOne}></View>
<View style={styles.innerTwo}></View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex:1
},
containerOne: {
flex:1,
backgroundColor:"red"
},
containerTwo:{
flex:2,
backgroundColor:"yellow"
},
innerOne: {
flex:1,
backgroundColor:"blue"
},
innerTwo: {
flex:4,
backgroundColor:"orange"
}
});
위 태그는 전체를 감싸는 <View> 태그 안에 두 개의 <View> 태그가 있으며, 그 중 두 번째 <View> 태그 안에 두 개의 <View> 태그가 있는 구조다. 전체를 감싸는 최상위 태그는 flex : 1, 즉 전체 화면을 갖는다. 한 단계 아래의 태그 - containerOne, containerTwo - 는 flex값이 각각 1, 2이므로 전체 화면의 1/3, 2/3을 나눠 갖는다. 그 중 두 번째 태그는 또다른 2개의 자식(하위) 태그 - innerOne, innerTwo -를 가지는데, 각각 1과 4의 flex값을 갖는다. 즉 전체 화면의 2/3를 차지하는 영역 - containerTwo - 을 또다시 1/5, 4/5로 나눠 갖는 것을 의미한다.
flex는 영역을 비율로서 나눠 가질 수 있게 하는 속성이다. 전체 태그에 대해 상대적인 비율을 갖는 것이므로 표현에 익숙해질 것!
2) flexDirection
flex로 영역을 비율로서 나눴다면, flexDirection, justifyContent, alignItems는 영역 안의 컨텐츠를 어떻게 정렬시킬 것인지를 지정하는 속성이다. 먼저 flexDirection은 내부 영역의 방향을 어떻게 잡을 것인가를 지정한다. CSS의 flex-direction과 유사하다.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.containerOne}></View>
<View style={styles.containerTwo}>
<View style={styles.innerOne}></View>
<View style={styles.innerTwo}></View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex:1
},
containerOne: {
flex:1,
backgroundColor:"red"
},
containerTwo:{
flex:2,
// 정렬 방향을 가로로 설정한다.
flexDirection:"row",
backgroundColor:"yellow"
},
innerOne: {
flex:1,
backgroundColor:"blue"
},
innerTwo: {
flex:4,
backgroundColor:"orange"
}
});
위 코드에서, containerTwo의 flexDirection 값이 row로 설정된 것을 볼 수 있다. 이는 부모 영역 안의 컨텐츠들을 좌우로 배치시키겠다는 뜻이다. 실제 화면을 보면 아래쪽 영역의 정렬 방향이 세로가 아니라 가로 방향으로 설정된다. 반대로, 부모 영역 안의 컨텐츠들을 상하(세로) 방향으로 설정하고 싶다면 flexDirection 값을 column으로 주면 된다. 해당 속성의 기본 default값은 column이다.
3) justifyContent
flex로 영역을 나누고, flexDirection으로 영역의 방향까지 설정한 후에도, 그 영역 안에도 컨텐츠들이 존재하며, 이 컨텐츠들을 정렬하는 속성이 필요하다. 이러한 속성들로 justifyContent와 alignItems를 배워보자.
먼저, justifyContent는 flexDirection과 동일한 방향으로 내부에 있는 컨텐츠를 정렬하는 속성이다. 예전에 배운 CSS를 잠깐 떠올려보자면, flexDirection으로 설정한 주축 방향에서 어떻게 컨텐츠를 정렬할 것인가를 다루는 속성이다.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.containerOne}>
</View>
<View style={styles.containerTwo}>
<View style={styles.innerOne}>
</View>
<View style={styles.innerTwo}>
<Text>!!컨텐츠!!</Text>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex:1
},
containerOne: {
flex:1,
backgroundColor:"red"
},
containerTwo:{
flex:2,
flexDirection:"row",
backgroundColor:"yellow"
},
innerOne: {
flex:1,
backgroundColor:"blue"
},
innerTwo: {
flex:4,
// flexDirection 속성이 없음 = 'column'
justifyContent:"flex-start",
backgroundColor:"orange"
}
});
위 코드에서 innerTwo 영역에는 flexDirection 속성이 지정되어 있지 않으므로, 기본값인 column, 즉 상하로 정렬되어 있는 상태다. 이 상태에서 justifyContent를 flex-start로 주면, 주축인 상하 방향에서 제일 윗부분으로 정렬이 된다. center, flex-end 등의 값을 지정할 수 있는데, 이 값들이 상하 방향 기준으로 정렬되는 것을 확인할 수 있다. 여기에서 flexDirection값을 row로 주면 좌우 방향으로 왼쪽, 중앙, 오른쪽으로 정렬된다.
4) alignItems
alignItems 속성은 flexDirection 방향과 반대 방향을 기준으로 내부 컨텐츠들을 배치한다. 즉 flexDirection에서 설정한 교차축을 기준으로 컨텐츠를 배치한다는 뜻이다. 앱 레이아웃을 짤 때 전체적인 배치는 좌우로, 특정 컨텐츠만 상하로 배치하고자 할 때 이 속성을 사용하면 효과적이다.
flexDirection은 컨텐츠의 방향,justifyContent와alignItems는 컨텐츠를 어디에 두냐를 결정하는 속성이다.
Leave a comment