2.4 Layout System

React Native를 사용하려면 Flexbox를 사용해야 한다.

React Native의 Flexbox는 몇 가지를 제외하고는 웹에서와 거의 같은 방식이라고 한다.

 

1. 예외

1) React Native에는 display: block, display: inline-block, display: grid 가 없다. Flexbox만 사용해주면 된다.

 

2) 모든 View는 Flex Container 이다.

웹에서는 display:flex를 한 다음에 flex-direction을 할 수 있었지만,
react-native에서는 이미 Container View 가 Flex Container이다.
따라서, 기본적으로 모든 View는 Flex Container 이다.

 

3) 모바일에서는 Flex Direction의 기본값은 모두 Column(수직, 세로) 이다.
하지만, 웹에서는 Flext Direction의 기본값은 Row(수평, 가로) 이다.

 

4) Overflow가 있다고 해서 스크롤할 수 있다는 의미는 아니다.

 

5) 우리는 앱을 만들 때 반응형 디자인에 대해서 생각해야 한다.
우리는 수 많은 스크린에서 동일한 방식으로 보이는 레이아웃을 만드는 것에 대해서 생각할 필요가 있다.
왜냐하면 React Native 어플리케이션을 만들 때 핸드폰 기기마다 스크린 사이즈가 정말 다양하기 때문이다.
대부분의 경우 우리는 width와 height를 사용하지 않는다.
만약에 우리가 아이콘이나 아바타가 있다면 우리는 width나 height를 사용할 수 있을 것이다.
하지만, 레이아웃에서는 이걸 사용하지 않는다.

 

6) React Native 방식으로 앱 만들기 :
React Native에서는 숫자만 생각하면 된다.
우리는 모든 View가 Flex Container 라는 것을 알고 있다.
우리는 이제 각 View 들에게 Flex Size를 줘야 한다.
부모 View에게 flex: 1을 주도록 하겠다.
그리고 자식 View에게도 똑같이 flex: 1을 주도록 하겠다.

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

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1, backgroundColor:"tomato" }}></View>
      <View style={{ flex: 1, backgroundColor:"teal" }}></View>
      <View style={{ flex: 1, backgroundColor:"orange" }}></View>
    </View>
  );
}

레이아웃이 똑같은 사이즈로 분배가 된 것을 확인할 수 있을 것이다.
이것이 바로 React Native 식 시스템으로 똑같은 비율로 표현하는 방법이다.

 

그렇다면, 자식 View의 각 flex: 1은 무엇을 의미할까?
이것이 의미하는 바는 이 3개의 View가 크기를 동일하게 조절하겠다는 의미이다.

 

가운데 View를 2로 바꾸면 어떻게 될까?

잘 보면 가운데 부분이 위, 아래 부분의 2배가 된 것을 알 수 있다.
즉, flex는 단지 비율일 뿐이다.

우리는 이런식으로 flex를 사용해서 앞으로 앱을 만들 것이고,
width 나 height는 사용하지 않을 것이다.

 

또한, 부모의 flex 역시 굉장히!! 중요한데,
예를 들어서 지금 위의 코드에서 부모 View의 flex를 지우면 모든게 사라지게 된다.
왜냐하면, 자식의 flex가 어떤 것의 몇배인지 모르기 때문이다.
기준점이 필요하기 때문에 부모에 flex를 주는 것은 매우 중요하다.