Eojin Han

스크린 상에서 컴포넌트의 height(세로), width(가로)를 설정하는 방법.

두가지로 나뉜다.

Fixed Dimension (고정 치수)

Flex Dimensions (유연한 치수)

Fixed Dimensions

그냥 일반적으로 고정값을 적는 것이다.

style의 width, height로 고정값을 딱 정한다.

React Native의 모든 치수는 단위가 없으며 밀도에 독립적인 픽셀을 나타낸다.


import React from 'react';
import { View } from 'react-native';

//고정값으로 가로 세로 픽셀을 설정함.
const FixedDimensionsBasics = () => {
    return (
      <View>
        <View style={{width: 50, height: 100, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
      </View>
    );
};

export default FixedDimensionsBasics;

Flex Dimensions

컴포넌트의 스타일로 flex를 사용하면 가용 공간 내에서 알아서 확장하고 수축한다.

즉 컴포넌트가 화면에서 차지할 '비율'을 표기하는 거라고 보면 됨.

컴포넌트 하나만 있는 경우라면 flex:1와 flex:3의 결과는 동일하다.

해당 컴포넌트가 가용공간 전체를 다 차지한다.

다만 flex를 가진 컴포넌트가 2개 이상일 경우라면 flex 비율에 따라 공간을 나눈다.

예시)

A = flex:1

B = flex:3

⇒ A는 1/4 만큼 공간 차지, B는 3/4 만큼 공간 차지

다만 flex가 제대로 동작하려면 컴포넌트가 속해있는 상위 컴포넌트의 가용공간이 0보다 커야한다.

즉 부모 컴포넌트가 fiexed dimension이나 flex 둘 중 하나라도 가지고 있지 않다면 부모는 dimension=0을 갖게 될테고 flex를 가진 하위 컴포넌트들은 보이지 않는다.

예시코드


import React from 'react';
import { View } from 'react-native';

const FlexDimensionsBasics = () => {
    return (
      //부모요소와 형제는 없고, 부모요소가 flex를 가지므로 가용공간 전체를 차지함.
      <View style={{flex: 1}}>
				{ //하위 컴포넌트들은 부모가 가진 가용공간을 flex의 비율에 따라 각각 나눠 씀. }
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
};

export default FlexDimensionsBasics;

부모요소가 단독이며 flex를 받았으므로 가용공간 전체를 사용한다.

이 범위 내에서 자식 컴포넌트들이 flex 비율에 따라 각자 공간들을 나누는 것.

부모의 dimension이 없으므로 자식 컴포넌트들의 flex가 의미가 없다.

화면에 나오지 않음.

부모의 크기를 height:300으로 고정 값을 주었다. 태블릿이던 PC던 쓸 수 있는 가용공간과는 상관없이 정확이 높이가 300인 가용공간 내에서 자식들이 flex 비율에 따라 각자 공간을 나눠 가진다.

Fixed Dimensions, Flex Dimensions

Fixed Dimensions

Flex Dimensions

예시코드