[React Native] 컴포넌트 높이와 너비(fixed, flex, percent)

고정된 크기

컴포넌트의 크기를 설정하는 일반적인 방법은 style에 고정된 너비와 높이를 추가하는 것입니다. react natvie에서 모든 크기는 단위가 없으며, 밀도 독립적인 픽셀을 나타냅니다.

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

const FixedDimensionsBasics = () => {
  return (
    <View>
      <View
        style={{
          width: 50,
          height: 50,
          backgroundColor: 'powderblue',
        }}
      />
      <View
        style={{
          width: 100,
          height: 100,
          backgroundColor: 'skyblue',
        }}
      />
      <View
        style={{
          width: 150,
          height: 150,
          backgroundColor: 'steelblue',
        }}
      />
    </View>
  );
};

export default FixedDimensionsBasics;

이 방법으로 크기를 설정하는 것은 화면 크기에 따라 계산되는 것이 아니라 항상 특정한 포인트로 고정해야 하는 컴포넌트에 일반적입니다.

플렉스 크기

컴포넌트의 style에 flex를 사용하여 동적으로 사용 가능한 공간에 따라 컴포넌트가 확장하거나 축소되도록 설정할 수 있습니다. 보통 flex: 1을 사용하며, 이는 컴포넌트가 부모 컴포넌트와 같은 공간을 공유하며 사용 가능한 모든 공간을 채우도록 지시합니다. 할당된 flex 값이 클수록 해당 컴포넌트가 형제 컴포넌트에 비해 차지하는 공간 비율이 높아집니다.

컴포넌트는 부모가 0보다 큰 크기를 가질 때만 사용 가능한 공간을 채울 수 있습니다. 부모에게 고정된 너비나 높이가 없고 flex도 없으면 부모의 크기는 0이 되며, flex 자식 컴포넌트는 보이지 않습니다.

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

const FlexDimensionsBasics = () => {
  return (
    <View style={{flex: 1}}>
      <View style={{flex: 1, backgroundColor: 'powderblue'}} />
      <View style={{flex: 2, backgroundColor: 'skyblue'}} />
      <View style={{flex: 3, backgroundColor: 'steelblue'}} />
    </View>
  );
};

export default FlexDimensionsBasics;

백분율 크기

화면의 특정 부분을 채우고 싶지만 flex 레이아웃을 사용하고 싶지 않다면, 컴포넌트의 style에서 백분율 값을 사용할 수 있습니다. 플렉스의 크기와 유사하게 백분율 크기는 부모 컴포넌트에 정의된 크기를 요구합니다.

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

const PercentageDimensionsBasics = () => {
  return (
    <View style={{height: '100%'}}>
      <View
        style={{
          height: '15%',
          backgroundColor: 'powderblue',
        }}
      />
      <View
        style={{
          width: '66%',
          height: '35%',
          backgroundColor: 'skyblue',
        }}
      />
      <View
        style={{
          width: '33%',
          height: '50%',
          backgroundColor: 'steelblue',
        }}
      />
    </View>
  );
};

export default PercentageDimensionsBasics;