React Native X Expo_ 엘리먼트 & 태그에 Style 입히기 StyleSheet, Flex

엘리먼트 & 태그에 Style 입히기

 

이전 포스팅에서 만들어보았던 화면들로 스타일을 입혀보자

이전 포스팅을 보고 싶다면 아래를 클릭!!

 

2022.06.30 - [모바일/React Native] - [React Native X Expo] View, ScrollView, Text, Button, TouchableOpacity, Image 엘리먼트 & 태그 활용 리액트 네이티브

[React Native X Expo] View, ScrollView, Text, Button, TouchableOpacity, Image 엘리먼트 & 태그 활용 리액트 네이티

 

React Native에서 사용하는 styleSheet 활용 문법

 

태그에 스타일을 입히는 방법은 몇 가지가 존재합니다

 

• 모든 태그에는 공통적인 style 속성이 존재한다 그래서 그 속성에 값을 직접 주는 방법
• 리액트 네이티브에서 제공하는 StyleSheet 모듈을 임 폴트 해서 사용하는 방법
  • StyleSheet는 모듈로 create 함수를 사용하여 객체로 만들어서 스타일을 정리해두어 사용하게 될 경우 객체로 이름을 부여하여 사용이 가능합니다

import { StyleSheet } from 'react-navite'

const styles = StyleSheet.create({
	container: {
    		backgroundColor: '#77'
    }
})

위와 코드를 작성하게 되면 style속성에 객체로 값을 부여할 수 있게 됩니다

 

<View style={styles.container}>

 

style속성에 우리가 만들어 두었던 styles의 객체로 container를 불러서 사용할 수 있습니다

 

---

 

자주 사용하는 스타일 속성

 

지금까지는 스타일을 입히는 방법을 알아보았다면

이제는 어떠한 속성들이 있는지를 알아보시죠!

하지만 그 많은 것들을 다 알 필요는 없습니다

 

왜냐하면 모든 사람들이 그것을 다 외우지는 않으니까요

 

그때그때 상황에 맞게 필요할 때마다 속성을 검색해서

사용하는 방법을 익히면 됩니다

그렇다고 막 익히려고 하지 않아도 자연스럽게 채득 할 수 있을 겁니다  

 

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    //영역을 잡는 속성입니다. 따로 자세히 다룹니다.
    //flex: 1은 전체 화면을 가져간다는 뜻입니다
    flex: 1,
    //영역의 배경 색을 결정합니다
    backgroundColor: '#fff',
    //아래 두 속성은 영역 안의 컨텐츠들의 배치를 결정합니다. 
    //flex를 자세히 다룰때 같이 자세히 다룹니다
    justifyContent:"center",
    alignContent:"center"
  },
  textContainer: {
    //영역의 바깥 공간 이격을 뜻합니다(하단 이미지 참조)
    margin:10,
    //영역 안의 컨텐츠 이격 공간을 뜻합니다(하단 이미지 참조)
    padding: 10,
    //테두리의 구부러짐을 결정합니다. 지금 보면 조금 둥글죠?
    borderRadius:10,
    //테두리의 두께를 결정합니다
    borderWidth:2,
    //테두리 색을 결정합니다
    borderColor:"#000",
    //테구리 스타일을 결정합니다. 실선은 solid 입니다
    borderStyle:"dotted",

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

위와 같이 정말 여러 속성들이 있죠?

저도 매일 찾아서 하니깐 너무 신경 쓰지 말고 이런 것이 있구나 하고 다음으로 넘어갑시다!!

 

---

 

style 속성 중 중요한 Flex 제대로 알기

• 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"
  }
});

 

위와 같이 flex에 숫자를 넣어서 값을 할당할 수 있습니다

그렇게 되면 전체 화면에 대한 비율을 나타나게 됩니다

위에는 flex를 3번을 사용했습니다

하지만 태그 구조상 상위 View태그 하나에 하위 View 태그 2개가 존재합니다

그렇기 때문에 상위 태그의 flex 1은 전체를 나타내는 비율이며

그 안에 하위 2개의 하위 태그가 다시 비율을 지정하게 됩니다

2개의 하위 태그는 각각 1과 2를 flex에 부여하고 있어 

1 + 2를 하여 1/3과 2/3의 비율로 화면이 구성되게 됩니다

 

위의 코드를 구성화면이며 1/3과 2/3의 비율로 화면이 분활되어있음을 확인할 수 있다

 

그럼 한 가지 예를 더 보고 넘어가도록 합시다

 

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"
  }
});

 

이 경우는 1개의 상위 view태그에 2개의 하위 태그

그리고 한 개의 하위 태그는 다시 2개로 분할 되어있죠

이 경우는 처음 2개의 하위 태그 flex 1과 2로 분할하여

2/3에 해당하는 영역에서 다시 두개로 나눈값을 1/5, 4/5분할하게 됩니다 

그래서 flex 값이 같더라도 영역의 크기가 달라지게 됩니다

 

위의 코드를 구현한 화면이다

 

 

반응형

---

• FlexDirection
  • 자식태그의 영역을 정렬방향을 세로 또는 가로로 지정할 수 있는 속성
  • flexDirection: "row" 가로 방향,  flexDirection: "column" 세로 방향
  • 기본값은 colunm입니다

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"
  }
});

 

 

정렬이 빨강 영역보다 다르다는 것을 알 수 있다

 

---

 

• justifyContent
  • justifyContent는 상위 태그에서 지정된 flexDirection의 방향과 어떻게 정렬할것인지 지정하는 속성입니다.
  • flexDirection을 꼭 지정해야 justifyContent를 지정할 수 있는것을 기억하세요
  • 속성에는 flex-start, center, flex-end, space-between, space-around이 있습니다.
  • flex-start는 영역들이 제일 상단에서 부터 정렬됩니다.
  • center는 영역들이 중앙에 모여있는 형태가 된다.
  • flex-end는 제일 하단에서 부터 정렬된다 
  • space-between는 여러 영역들을 처음 중간 끝에 나열하게된다.
  • space-around는 여러 영역들을 처음 중간 끝을 일정한 간격으로 나열하게된다

어떻게 정렬되는지 확인이 가능하다

 

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,
    justifyContent:"flex-start",
    backgroundColor:"orange"
  }
});

 

 

왼쪽에 치우쳐진 것을 볼수 잇다

 

부모 태그 영역을 flexDirection이 무엇으로 지정했는지가 중요합니다

 

 

---

 

• alignItem
  • alignItem은 flexDirection의 반대로 정렬됩니다
  • flexDirection 값이 coloumn으로 지정 되었다면, 자식 태그에 alignItem의 값을 지정하게 되면 좌우로 정렬 됩니다
  • row으로 지정되었다면, 반대가 된다
  • flex-start, center, flex-end, stretch 속성을 가지고 있습니다

 

이미지를 잘 확인하면서 속성들이 어떻게 표현하는지 확인 합시다

 

 

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 style={styles.content}></View>
        </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",
    alignItems:"flex-end"
  },
  content: {
    width:50,
    height:50,
    backgroundColor:"#000"
  }
});

 

 

이미지를 확인해보세요!!

 

 

2개의 포스팅으로 앱 화면 만들어 보았습니다

저도 개발자가 되고 공부를 많이 하고있습니다

이 직업은 항상 공부를 해야 한다는 것이 부담되고 힘들기도 합니다

하지만 공부라고 생각하지마시고 사이드프로젝트를 하면서

자기만의 사이트를 만들어보고, 다른 기능들도 붙여보고,

회사에서 사용한 코드들을 나만의 노트에 정리도 하면서,

흥미를 붙이는 과정이 정말 중요한것 같습니다

그럼 모두 화이팅 하시고!!

 

즐거운 코딩시간이 되었으면 합니다

화이팅!!