React Native 시작하기

react를 배우고 나니 react native에 대해 궁금해져서
기본적인 개념을 익히고자 강의를 듣기 시작했다!!
시작이니까 기본 개념같은 것 정리해야지👊

1. Rules

1) View는 container

div 대신 View를 사용 -> 항상 import 해야함.

2) react native에 있는 글은 모두 Text component 안에 들어가야함.

브라우저가 아님 -> span, p 태그 사용 불가

3) react.js랑 style이 비슷하긴 하지만 사용 불가능 한 것들이 있음.

const styles = Styledsheet.create({
	container:{
    
    }})

Styledsheet.create는 object를 생성하는데 사용함.

➡️ 사용하는 이유 : 자동완성기능 제공
꼭 이걸 사용해야하는 건 아님. 인라인 스타일도 사용 가능함

<Text style={{
	fontSize=28}}>

이런식
신기한게 css에서 오류가 발생하면 친절하게 알려줌

❗️ component가 전부 렌더링 되는게 아니라 일부는 ios, android 운영체제랑
소통하기 위한 것임. ex) Status-Bar

2. packages

옛날에는 많은 components와 API들이 많았지만 이제는 대신 pakages를 사용하게 함.->유지관리와 업데이트가 힘들기 때문.

components와 APIs 차이점

(1) component

• component는 화면에 렌더링할 항목
• return안에 있음

(2) API

• api는 javascript code임 (운영체제와 소통)

자체적으로 만든 apis , components -> expo SDK
(react native가 아닌 expo에서 제공)

react native에서 만든 것과 expo에서 만든 것, 두가지가 있을 수 있음.
다른 기능을 가질 수 있다는 점!

3.Layout

• Views는 기본적으로 Flex container
• react native에서 flex direction의 기본 값은 column임
  (웹에서 기본 값은 row)
• 레이아웃에서는 width, height를 사용 안함. 디바이스마다 사이즈 차이때매

    <View style={{ flex: 1 }}>
      <View style={{ flex: 1, backgroundColor: "tomato" }}></View>
      <View style={{ flex: 1, backgroundColor: "orange" }}></View>
      <View style={{ flex: 1, backgroundColor: "pink" }}></View>
    </View>

이렇게 하면 세가지 색이 동일한 사이즈로 꽉차게 되는데
3개의 view의 크기를 동일하게 조절한다는 뜻.(기본값과 비율)