TIL-72, React-Native의 CSS

React-Native (RN)에서는 웹에서 사용하던 CSS 속성들을 ‘거의 모두’ 사용할 수 있다.

어떤 것들을 그대로 사용할 수 있는지, 또는 사용할 수 없는지는

공부하며 무언가를 만들어보면서 정리하도록 하고, 중요한 특징을 알아보자.

FlexBox

웹에서도 Flex도 사용하고, Grid도 사용한다.

하지만 RN에서는 Flex만 사용한다.

게다가, ‘모든 View는 기본적으로 flex가 적용되어 있다’

웹에서는 Flex를 사용하기 위해 display: flex 속성을 넣어줬지만,

RN에서는 기본적으로 flex가 적용되어 있기 때문에,

flexDirection: "row" 와 같이 바로 flexBox 설정이 가능하다.

웹에서는 flex direction이 ‘row’가 기본이었지만,

RN에서는 ‘column’이 기본값이다.

Width, Height

수 많은 종류의 휴대폰이 있기 때문에 Width, Height를 사용하게 된다면

휴대폰마다 요소들이 보이는것이 다를 수 있다.

어떤 휴대폰 (장치) 에서 보더라도 항상 같은 화면을 유지해야하는데,

React.js로 웹을 만들때도 반응형 웹을 구상했었다.

RN에서도 마찬가지로 반응형 앱을 구상해줘야 하기 때문에 Width, Height 사용은 지양한다.

대신 아래와 같이 사용하자.

...
<View stlye=>
  <View stlye=></View>
  <View stlye=></View>
  <View stlye=></View>
</View>
...

위와 같이 설정해주면, 부모 View의 flex는 1인 상태에서

자식 View들의 비율을 1 : 1 : 1로 설정된다.

이렇게 알아본 flexBox 속성과 비율 설정으로 React-Native 앱의 Layout을 손쉽게 짤 수 있다.