높이와 너비

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

고정된 크기 설정

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

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

caution

포인트와 실제 물리적 측정 단위 간의 보편적인 매핑은 존재하지 않는다. 즉, 고정된 크기를 가진 컴포넌트가 다른 기기와 화면 크기에서 동일한 물리적 크기를 가지지 않을 수 있다. 하지만 대부분의 사용 사례에서는 이러한 차이가 눈에 띄지 않는다.

플렉스 박스 크기 조정

컴포넌트의 크기를 동적으로 조정하려면 스타일에 flex 속성을 사용한다. 일반적으로 flex: 1을 사용하며, 이는 컴포넌트가 사용 가능한 모든 공간을 동일한 부모를 가진 다른 컴포넌트들과 균등하게 나누어 차지하도록 한다. flex 값이 클수록 형제 컴포넌트들에 비해 더 많은 공간을 차지하게 된다.

info

컴포넌트가 사용 가능한 공간을 채우려면 부모의 크기가 0보다 커야 한다. 부모가 고정된 width와 height 또는 flex 속성을 가지고 있지 않다면, 부모의 크기는 0이 되고 flex를 가진 자식 컴포넌트들은 보이지 않게 된다.

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

백분율 기반 크기 지정

화면의 특정 부분을 채우고 싶지만 flex 레이아웃을 사용하고 싶지 않다면, 컴포넌트 스타일에서 백분율 값을 사용할 수 있다. flex 크기 지정과 마찬가지로, 백분율 기반 크기 지정은 부모 요소에 정의된 크기가 필요하다.