[React-Native] 날씨 앱 만들기(1/6)_Layout Part.1

(노마드 코더 강의 정리함)

React Native Packages

StyleSheet.create

- StyleSheet.create를 쓰면 자동완성 쓸 수 있어서 좋다. 

- 이거 없이 object 형식으로도 동작은 하지만 자동완성 기능 없어서 불편하기 때문에 쓰자.

 

ReactNative.dev

https://reactnative.dev/docs/components-and-apis

Core Components and APIs · React Native

- 컴포넌트랑 API 등 문서는 여기서 찾아보면 된다.

- 버전 업데이트 되면서 옛날보다 없어진 것도 많고 필수적인것만 남았다고 함.

 

 

Third Party Packages

reactnative.directory

https://reactnative.directory

 

react-native 커뮤니티이다. 

여러 사람들이 여기에 apis package들을 등록해 놓지만 업데이트가 늦거나 버그가 발생할 확률이 높다.

그래서

docs.expo.dev

https://docs.expo.dev/

Expo Documentation

expo에서 제공하는 apis package 들을 사용하면 됨.

 

StatusBar

 

statusbar 는 expo에서 제공하는것도 있고 react-native 에서 제공하는 것도 있다.

 

 

Layout System

Flexbox

기억해야할 것

1. 모바일에서 react-native는 기본 direction이 colunm이다. (가로로 하려면 flexDirection: "row" 로 설정해줘야함)

2. 컨테이너를 만들 때, 99%는 width와 height를 쓰지 않는다.

 

- 가로 세로 설정 대신 위처럼 flex로 비율을 줘서 사용한다.

- 부모 컨테이너에 flex를 주지 않으면 안나옴. 부모 컨테이너 기준으로 비율이 맞춰지는 거임.