5.React Native 레이아웃 디자인 - 1부 flex와 width, height

이 글은

5.React Native 레이아웃 디자인 - 1부 flex와 width, height(현재글)

5.React Native 레이아웃 디자인 - 2부 배치(Flex Direction)와 정렬(justify content, align items)

5.React Native 레이아웃 디자인 - 3부 커스텀 버튼

5.React Native 레이아웃 디자인 - 4부 이미지 컴포넌트와 UI 마무리로 구성되어있습니다.

지난 시간동안 JSX, 기본 컴포넌트, State와 Props등 React Native를 사용하기 위한 기초 지식들을 알아봤는데요.

드디어 실전의 시간이 왔습니다!

이번 시간부터 레이아웃 잡는 법, 화면 이동(관리), 애니메이션, 모션 제어에 대해 순서대로 알아보겠습니다.

1.레이아웃 나누기

저는 앱을 디자인 할 때 가장 먼저 해야할 일이 레이아웃 나누기라고 생각합니다.(주관적인 생각입니다.)

먼저 화면에 글, 이미지, 버튼 등이 어느 곳에 배치될지 구상하고, 세부적인 요소들을 예쁘게 꾸미는 것이지요.

좀 더 편한 실습을 위해 새로운 앱을 구상하기 보다는 기존의 앱 화면을 응용하여 구현해보도록 하겠습니다.

글자, 이미지, 버튼 두 개로 간단한 구성으로 이루어진 이 화면은 헤이카카오 앱의 시작 화면입니다.

기본 레이아웃을 잡는 실습에 안성맞춤이네요.

위 화면은 아래처럼 나눌 수 있습니다.

이번 글에서 뭘 할지 대충 느낌이 오시나요?

자, 그럼 레이아웃은 어떻게 나눌 수 있을까요?

레이아웃을 나눌때 주로 View를 사용하게 되는데, 우선 View의 크기를 결정하는 몇가지 style 속성을 보겠습니다.

2.View 크기(범위)를 결정하는 속성

View의 크기를 결정하는 속성은 flex와 width, height 두 가지로 나눌 수 있습니다.

width, height에 숫자를 넣으면 고정 크기, %를 넣으면 화면 크기에 따른 상대적 크기를 설정할 수 있습니다.

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

잘 이해되지 않으실 수 있는데, 아래 몇가지 예를 보겠습니다.

-- flex

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container} />
    );
  }
}

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

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.case1} />
        <View style={styles.case2} />
      </View>
    );
  }
}

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

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.case1} />
        <View style={styles.case2} />
        <View style={styles.case3} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  case1: {
    flex: 1,
    backgroundColor: 'red',
  },
  case2: {
    flex: 3,
    backgroundColor: 'green',
  },
  case3: {
    flex: 1,
    backgroundColor: 'blue',
  },
});

3가지 케이스를 가져왔습니다. render()안에 View와 각 뷰의 style을 유심히 봐주세요.

'flex: 1' 인 컨테이너(container) 뷰는 화면 전체를 1의 비율만큼 차지하고 있습니다.

두번째 케이스는 컨테이너 View 안에서 1:1의 비율, 즉 반반 만큼의 공간을 차지하고 있고요,

세번째 케이스는 컨테이너 View 안에서 각각 1:3:1의 비율만큼 공간을 차지하고있네요.

flex는 부모 View 크기의 특정 비율만큼 차지하게 됩니다.

컨테이너 View의 부모는 화면 전체를 뜻하게 됩니다.

-- width, height

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

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.case1} />
        <View style={styles.case2} />
        <View style={styles.case3} />
        <View style={styles.case4} />
        <View style={styles.case5} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  case1: {
    width:100,
    height:100,
    backgroundColor: 'red',
  },
  case2: {
    width:50,
    height:100,
    backgroundColor: 'green',
  },
  case3: {
    width:150,
    height:70,
    backgroundColor: 'blue',
  },
  case4: {
    width:"100%",
    height:70,
    backgroundColor: 'black',
  },
  case5: {
    width:"50%",
    height:"50%",
    backgroundColor: 'yellow',
  },
});

width, height는 간단합니다.

width는 가로, height는 세로 크기를 뜻합니다.

수치를 통해서 고정 크기를 지정할 수 있고 '100%'처럼 문자열을 통해서 %를 지정할 수 있습니다.

마찬가지로 부모 View에 해당하는 %만큼 할당하게 됩니다.

요즘처럼 기기별로 화면 크기가 다른 경우에도 width height에 %를 사용하거나 flex 속성을 사용한다면

동일한 레이아웃을 볼 수 있습니다.

3.Do it!

이제 앞에서 본 레이아웃 모양대로 직접 나눠보시기 바랍니다.

배경색을 지정하는 스타일 key는 backgroundColor입니다.

const styles = StyleSheet.create({
  header: {
    backgroundColor: 'rgb(255,0,0)',
  },
  title: {
    backgroundColor: '#9aa9ff',
  },
  content: {
    backgroundColor: 'red',
  },
});

rgb 혹은 #컬러코드, 영문명 색상으로 설정할 수 있습니다.

이제 직접 레이아웃을 구성해보세요!

디자인은 정답이 없습니다.

잠깐 기다리고 있겠습니다.

Tic.

Toc.

Tic.

Toc.

다 끝나셨나요?

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

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}><Text>header</Text></View>
        <View style={styles.title}><Text>title</Text></View>
        <View style={styles.content}><Text>content</Text></View>
        <View style={styles.footer}><Text>footer</Text></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    //alignItems: 'center',
    backgroundColor: 'black',
  },
  header: {
    width:'100%',
    height:'9%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ff9a9a',
  },
  title: {
    width:'100%',
    height:'18%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9aa9ff',
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#d6ca1a',
  },
  footer: {
    width:'100%',
    height:'20%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#1ad657',
  },
});

저는 위와 같은 스타일로 구현하였습니다.

자세히 보시면 height와 flex를 같이 사용한 것을 볼 수 있습니다.

이 둘을 같이쓰면 height로 고정된 값 이외의 범위 만큼을 flex의 비율로 채우게 됩니다.

header에는 네비바, footer에는 버튼이 고정으로 들어갈 것을 생각하고 이렇게 하였습니다.

flex만으로 구현하게 되면 title과 content 영역이 합쳐진다던가, 더 잘게 나눠졌을 때  header와 footer의 영역을 조절하기 어렵기 때문이죠.

여러분이 작성한 스타일과 비교해보세요!

4.요약

* View는 width, height를 사용하여 고정수치, 백분율 만큼 크기를 설정할 수 있다.

* flex는 동일한 부모 아래있는 다른 flex들과의 비율로 크기를 설정할 수 있다.

* flex와 %는 부모의 크기에 영향을 받으므로 이 속성을 사용할 때, 부모의 크기를 지정하지 않았는지 잘 확인한다.

* 부모의 크기를 지정하지 않고 자식의 크기가 고정수치라면 부모의 크기는 자식의 크기와 동일하다.

5.마치며

이번 글에서는 레이아웃을 나누는 첫 걸음을 시작했습니다.

이어서 버튼 컴포넌트 제작과 계속 의문을 품고 계셨을 정렬(가로정렬, 양끝맞춤 등)을 순서로 알아보겠습니다.