8.React-Native Layout(flex, flexDirection)

8-1 개요

없는 App이 없는 오늘날 같은 시대에서는 디자인이 정말 중요하다.

같은 기능을 하는 App이 2개가 있다면 소비자는 디자인, 효율성, 부가기능들을 따져서 둘중에 하나를 선택할 것이다.

React-native를 시작할 때 디자인 쪽을 공부하고 진행을 하면 더욱 빠르게 습득이 가능할 것 같아서 가장 먼저 디자인의 레이아웃 부분을 다룰 것이다.

---

8-2 Flex

flex는 크기를 비율로 설정하는 것이다.

—Example1

import React from 'react';
import {Text, View, StyleSheet} from 'react-native';

const App = () => {
  return (
    <View style = {styles.container} />
  )
}

const styles = StyleSheet.create({
  container: {
    flex : 1,
    backgroundColor: 'red',
  },
});

export default App;

❗16진수로 색상을 표현하고 싶을때는 '#FFFFFF' 이런식으로 앞에 '#'을 붙여주면된다.

결과

→ styles란 StyleSheet에 container란 속성값을 추가했고 flex는 1로 설정을 했다.

→하나의 View가 있는 App에서 View의 스타일을 styles.container로 지정했다.

→전체 1중에 1을 다 차지하고 있으므로 전체화면이 빨간색으로 칠해진다.

—Example2

import React from 'react';
import {Text, View, StyleSheet} from 'react-native';

const App = () => {
  return (
    <View style = {styles.container}>
      <View style={styles.box1}></View>
      <View style={styles.box2}></View>
      <View style={styles.box3}></View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex : 1,
    backgroundColor: 'white',
  },
  box1: {
    flex: 1,
    backgroundColor: 'green',
  },
  box2: {
    flex: 4,
    backgroundColor: 'red',
  },
  box3: {
    flex: 1,
    backgroundColor: 'blue',
  },
});
export default App;

결과

→ styles에 부모뷰 속성인 container와 자식뷰 속성인 box1, 2, 3을 만들어 주었다.

→자식뷰의 flex 속성은 각각 1, 4, 1이다.

→자식뷰 안에 flex가 총 6이 있고 box1은 1/6, box2는 4/6, box3은 1/6에 비율로 부모뷰를 차지하게 된다.

---

8-3 Flex Direction

부모뷰에서 지정하는 속성이고, 자식뷰를 어떻게 구성할껀지 알려주는 속성이다.

Default 값은 'column'이기 때문에 지정을 하지 않으면 위에 예제처럼 가로로 뷰가 쌓이는 것을 알 수 있다.

—Example

import React from 'react';
import {Text, View, StyleSheet} from 'react-native';

const App = () => {
  return (
    <View style = {styles.container}>
      <View style={styles.box1}></View>
      <View style={styles.box3}></View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex : 1,
    backgroundColor: 'white',
    flexDirection: 'row' //새로 배치, 가로는 'column'
  },
  box1: {
    flex: 1,
    backgroundColor: 'red',
  },
  box2: {
    flex: 1,
    backgroundColor: 'green',
  },
  box3: {
    flex: 1,
    backgroundColor: 'black',
  },
});

export default App;

결과

→ 부모뷰의 스타일 속성인 container에 flexDirection속성을 'row'로 지정했다.

→ 자식뷰가 새로로 쌓이는 것을 알 수 있다.

→ Flex Direction 속성에는 총 4개가 있다.

—Example2

import React from 'react';
import {Text, View, StyleSheet, SafeAreaView} from 'react-native';

const App = () => {
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.box1}></View>
        <View style={styles.box2}></View>
        <View style={styles.box3}></View>
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex : 1,
    backgroundColor: 'white',
    flexDirection: 'row-reverse' //새로 배치, 가로는 'column'
  },
  box1: {
    width: 100,
    height : 100,
    backgroundColor: 'powderblue',
  },
  box2: {
    width: 100,
    height: 100,
    backgroundColor: 'skyblue',
  },
  box3: {
    width: 100,
    height: 100,
    backgroundColor: 'steelblue',
  },
});

export default App;

❗width와 height 속성은 정수로 절대값을 줄 수도 있지만 백분율을 이용해서 퍼센테이지로 지정이 가능하다.

ex) width : '100%' → 해당 뷰의 넓이를 부모뷰의 넓이의 100%만큼 차지

height: '100%' → 해당 뷰의 높이를 부모뷰의 높이의 100%만큼 차지

결과

→ 상태바를 접근하지 못하게 SafeAreaView를 최상위에 추가하였다.

→ 자식 뷰를 flex 대신에 width, height 속성으로 크기를 지정했다.(절대값)

→ flexDirection 속성을 'row-reverse'로 지정하니 오른쪽부터 자식뷰가 가로로 쌓이는 것을 볼 수 있다.

Flex Direction 속성

이름	태그
column	왼쪽에서부터 가로로 쌓인다.
row	왼쪽에서부터 세로로 쌓인다.
column-reverse	오른쪽에서부터 가로로 쌓인다.
row-reverse	오른쪽에서부터 세로로 쌓인다.

---

8-4 마치며...

flex로 레이아웃을 하는 방법을 간단하게 공부하였다.

다음은 자식 컴포넌트의 정렬방식을 선택하는 속성을 공부할 예정이다.

Uploaded by Notion2Tistory v1.1.0