[JAVASCRIPT 공부일지] 2주차 - 3 (리액트 네이티브 - Style 스타일 속성)

'리액트 네이티브' 앱 개발에서 가장 중요하다고도 할 수 있는 Style 속성에 대해서 배워보고자 합니다.

---

<앱화면 만들기 - 구성한 화면 꾸미기 Styles>

 :태그에 이어 모든 태그에 공통적으로 있는 style 속성에 대해서 공부할 것입니다.
: style 속성은 엘리먼트들 즉 태그들에 스타일을 주기위한 속성입니다.

* StyleSheet 이라는 기능을 가져와서 스타일을 입힐 수 있습니다.

import StyleSheet from 'react-native';

* styles 라는 변수로써 StyleSheet를 쉽게 불러올 수 있습니다.

const styles = StyleSheet.create({
)}

>> StyleSheet을 생성해서 styles라는 변수에 넣어놓습니다.
>> const : 변하지 않는 변수값이므로 스타일 값으로 태그들을 꾸며줄 수 있는 것입니다.
>> styles는 container, textContainer, textStyle 등 다양하게 설정해놓을수 있음

container: { //영역을 잡는 속성입니다. 따로 자세히 다룹니다.
    flex: 1, // 전체 화면을 가져간다는 뜻입니다
    backgroundColor: '#fff', // 배경화면 색을 지정합니다. #fff는 WHITE(흰색)을 말합니다.
    
    //아래 두 속성은 영역 안의 컨텐츠들의 배치를 결정합니다. 
    justifyContent:"center",
    alignContent:"center"
  },

 

<텍스트 박스 관련 스타일>

textContainer: {
    margin:10, //영역의 바깥 공간 이격을 뜻합니다.
    
    padding: 10, //영역 안의 컨텐츠 이격 공간을 뜻합니다.
    
    borderRadius:10, //테두리의 구부러짐을 결정합니다.
    
    borderWidth:2, //테두리의 두께를 결정합니다.
    
    borderColor:"#000", //테두리 색을 결정합니다.
    
    borderStyle:"dotted", //테두리 스타일을 결정합니다. 점선은 dotted, 실선은 solid 입니다.
},

 

<텍스트 관련 스타일>

textStyle: {
    color:"red", //글자 색을 결정합니다. rgb, 값 이름, 색상코드 모두 가능합니다.
    
    fontSize:20, //글자의 크기를 결정합니다.
    
    fontWeight:"700", //글자의 두께를 결정합니다.
    
    textAlign:"center" //가로기준으로 글자의 위치를 결정(정렬)합니다.
}

 

<style 속성의 요소들>

 

margin = 컨텐츠 바깥에서의 여백
padding = 컨텐츠 안에서의 여백
flex : 1 = 전체화면을 가져간다는 뜻
fontWeight:"700" = 글자의 두께를 결정

 

cf) width:"90%" = 이 속성은 화면의 90%만큼만 너비를 차지하겠다는 의미이며, 문자열로 감싸줘야합니다.
cf) marginTop, marginLeft로 각 방향마다의 간격을 지정해줄 수 있다.

---

<앱화면 만들기 - 컨텐츠의 위치 : Flex>
- 앱화면을 구성할때 flex는 영역의 레이아웃을 결정하기 때문에 중요한 부분입니다.

ex) 컨테이너 안에
flex:1 
flex:2
flex:3 이 있으면

1+2+3 = 5 (전체 영역)

flex:2는 전체영역 5 중 2영역을 가진다는 의미로, 5분의 2영역을 가진다는 뜻입니다.
flex:3은 5분의 3영역을 가진다는 뜻입니다.

기본 값은 위에서부터 아래(상하)로 영역을 가로순으로 나눠가지지만
flexDirection:'column' (기본값) 

요소1

요소2

요소3

---

flexDirection:'row' 를 지정해주어

요소1

요소2

요소3

세로로 나누어지도록 설정해줄 수 있습니다. (= 좌우로 배치시키겠다)


<컨텐츠의 위치 : Flex>
1. justifyContent
Flex와 동일한 방향으로 내부에 컨텐츠를 정렬하는 기능입니다.
Flex안에서도 컨텐츠가 무수히 많을 수 있기때문에 그 안에서의 정렬기능을 하는 것입니다.

justifyContent:"flex-start"
>> flex 영역의 왼쪽 위 부터 컨텐츠가 붙게됩니다. 

ex) 왼쪽 위부터 텍스트가 써지는 예제

텍스트

justifyContent:"flex-end"
>> 왼쪽 맨 밑에 컨텐츠가 붙게되며

텍스트

justifyContent:"center"
>> 왼쪽 기준으로 중앙에 붙게됩니다.

텍스트

여기서 Flex의 flexDirection: row;로 바꿔보면
왼쪽 기준 중앙이 아니라 위쪽 기준 중앙으로 붙게됩니다. (그 차이점을 유의해야합니다.)

	텍스트

따라서 justifyContent:" " 는
left, right, center 속성을 쓰지 않고 flex-start, flex-end, center 속성을 쓰게됩니다.

---

2. AlignItems
alignItems 이 속성을 영역에 넣어주게되면 flex의 방향과 '반대'인 방향으로 배치를 합니다.

이 요소는 전체적으로는 앱이 상하 방향이지만 어떤 특정 콘텐츠 부분에서는 좌우 방향으로 배치하고싶다라고 할 때
이 기능이 잘 쓰일 수 있습니다.

2-1) alignSelf

alignSelf:"center"

>> alignItems는 flex영역 안에 있어야 정렬이 가능하지만
>> alignSelf는 flex영역에 있지 않아도 정렬이 가능한 옵션이다.

---

<앱화면 만들기 - 메인화면 완성하기>

// 기본적인 구조
import React from 'react';
import main from './assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';

export default function App() { // 경고 오류 예외처리
  console.disableYellowBox = true;
  return ()

}

const styles = StyleSheet.create({}) // StyleSheet 사용을 위한 변수 가져가기

---

'스파르타 코딩 클럽' 온라인 교육 플랫폼에서 배운 내용을 토대로 작성하였습니다.