높이와 너비

컴포넌트의 높이와 너비는 화면에서의 크기를 결정한다.

고정 크기 설정

컴포넌트의 크기를 설정하는 일반적인 방법은 스타일에 고정된 width와 height를 추가하는 것이다. React Native에서 모든 크기는 단위가 없으며, 밀도 독립적인 픽셀을 나타낸다.

이 방식으로 크기를 설정하는 것은 화면 크기에 따라 계산되지 않고 항상 고정된 포인트 수로 유지되어야 하는 컴포넌트에 일반적으로 사용된다.

caution

포인트와 물리적 측정 단위 간의 보편적인 매핑은 없다. 이는 고정 크기를 가진 컴포넌트가 다른 디바이스와 화면 크기에서 동일한 물리적 크기를 가지지 않을 수 있음을 의미한다. 그러나 대부분의 사용 사례에서는 이러한 차이를 눈치채기 어렵다.

플렉스 박스 크기 조정

컴포넌트의 스타일에 flex를 사용하면 사용 가능한 공간에 따라 컴포넌트가 동적으로 확장되거나 축소된다. 일반적으로 flex: 1을 사용하며, 이는 컴포넌트가 동일한 부모를 가진 다른 컴포넌트와 균등하게 공간을 채우도록 한다. flex 값이 클수록 형제 컴포넌트에 비해 더 많은 공간을 차지하게 된다.

info

컴포넌트는 부모의 크기가 0보다 큰 경우에만 사용 가능한 공간을 채울 수 있다. 부모가 고정된 width와 height 또는 flex를 가지고 있지 않다면, 부모의 크기는 0이 되고 flex를 가진 자식 컴포넌트는 보이지 않는다.

컴포넌트의 크기를 조정할 수 있게 되면, 다음 단계는 화면에 컴포넌트를 배치하는 방법을 배우는 것이다.

퍼센트 기반 크기 설정

화면의 특정 부분을 채우고 싶지만 flex 레이아웃을 사용하고 싶지 않다면, 컴포넌트 스타일에 퍼센트 값을 사용할 수 있다. flex 크기 설정과 마찬가지로, 퍼센트 기반 크기 설정은 부모 요소의 크기가 명시적으로 정의되어 있어야 한다.