[React Native] Layout System

React Native의 Flexbox는 웹의 Flexbox와 매우 유사하지만 몇 가지 차이점이 있다.

웹과 다른점

1. Flex Container의 지정

웹에서는 display:flex를 한 다음에 flex-direction을 할 수 있었다.
하지만 React Native에서는 모든 View가 기본적으로 Flex Container이다.

2. 기본 Flex 방향

웹에서는 Flex Container의 기본 방향이 row이다. 즉, 아이템이 수평으로 배치된다.
그러나 React Native에서는 Flex Container의 기본 방향이 column이다. 따라서 아이템이 수직으로 배치된다.

3. Overflow 처리

React Native에서는 Flex Container 내에서 Overflow가 발생해도 기본적으로 스크롤이 되지 않는다.

React Native에서는 Flexbox를 사용하여 레이아웃을 작성할 때 주로 비율을 사용한다.

너비나 높이를 고정값으로 설정하는 대신에 Flex Size를 줘서 비율로 요소를 배치한다.

이는 반응형 디자인을 지원해 다양한 화면 크기에 대응할 수 있도록 도와준다.
Flex 부모를 설정하여 자식 요소들이 어떤 비율로 배치되는지 명시해야 한다. 그렇지 않으면 자식 요소들이 무엇의 몇배인지 알 수 없다.

React Native에서는 기본값과 비율 덕분에 레이아웃을 만들기 쉽다.

코드에서 statusbar을 삭제해도 화면에서는 사라지지 않는다.
component를 없앤다고 statusbar가 사라지지 않기 때문이다.
Component는 단지 운영체제를 구성할 수 있는 방법 중 하나이다.

이렇게 같은 내용을 작성할때는 Shift + Alt + 마우스 클릭으로 한번에 작성할 수 있다.