[React-Native] React-Native와 Expo의 특징

✅ the rules of native

• 가장 먼저 react-native는 웹사이트가 아님!!
  
  

1. View 태그

• html div 사용 불가 => View (container임!!)
• 우리는 모든 것을 View로 만들게 될 것임
• 항상 import 해줄것
  
  

2. Text

• 모든 텍스트는 Text 컴포넌트에 들어갈것
• 그냥 View에 넣거나 하면 무조건 에러남
  
  

3. style

• div처럼 style 넣을 수 있음
• 근데 다 가능하진 않음
• 그래도 거의 가능, 자동완성도 지원
• StyleSheet.create 사용하거나 직접 넣어주기
  • StyleSheet.create 생략해도 들어가긴 하는데 자동완성이 안됨
    
    

4. Status Bar

• 기본 import에서 볼 수 있듯 외부 패키지에서 가져옴
• 이는 스마트폰 상단바(시계, 배터리, 와이파이 등)를 의미
• style이 기본적으로 auto로 설정, 배경에 따라 색이 변함
• light로 하면 희색으로 바뀜
• 이처럼 몇몇 컴포넌트는 화면에 보여지지 않고 운영체제와 소통하기 위한 것들

✅ react-native의 FlexBox

• 웹에서는 display를 flex로 지정한 뒤에 flexDirection등 지정 가능

• 하지만 여기서는 View가 기본적으로 flex Container

• flex-direction의 기본값은 column (웹에서는 row)

• 대부분은 상황에서 크기는 width와 height로 하지 않음
  => 화면 크기가 너무 다양하니까!!
  

• react-native방식으로 레이아웃 만들기
  => style={{flex:1}}
  => 부모나 자식에서 같은 수준에 있는 요소끼리의 비율
  => 비율은 부모 기준이다보니 부모에 flex css 속성이 없으면 화면에 나타나지 않음

✅ 지원 컴포넌트들

• 과거에는 가능한 모든 기능을 제공하려 했으나, 유지관리와 업데이트 문제가 많았음
• 그래서 최소한의 기능만 제공하게 점차 바뀜
• 그래서 복잡한 컴포넌트는 커뮤니티 패키지로 받게 함

✅ 외부 패키지

• 많은 사람들이 창의력을 발휘해서 발행하는 패키지들, 때로는 더 좋기도 함
• 하지만 개인이 하는거다보니 개인 사정에 따라 버그 수정 등이 늦어질 수 있음
• expo 팀은 이를 인지하고 자체적으로 Packages와 API들을 만들었음
  => Expo SDK
• Expo SDK에 들어가서 컴포넌트 설치문과 import문을 복사해서 사용!!