모각코처음하는사람들 2회차 2022.01.06

목표

• 알고리즘 1문제 풀기
• 노마드코더 RN강의 보기

React native

Rule

1. react native는 웹사이트가 아니다.

   따라서 html이 아니므로 div는 사용할수 없다.

   대신 View를 사용한다. View == container (항상 import가 필요하다. )

2. RN에 있는 모든 text는 text component에 들어가야 한다.

   브라우저가 아니기 때문에 span을 사용할수 없다.

3. View에는 style이 있지만 일부 style을 사용할 수 없다.

   ex) border (x) backgroundColor (o) 등등

   StyleSheet.create() 명령어를 통해 styles의 object를 생성할수있다. (css가 아니고 js이기 때문에 카멜 표기법 이용)

Layout System

• 기본적으로 모든 View는 Flex Container이다. (Flex Direction 기본값은 모두 Column 이다. )

• width, height에 기반하여 디자인하면 안된다. (width:200, height:200은 스크린에 따라 매우 다르게 보일수 있다. => 반응형 디자인에 대해 생각해야한다. )

   <View style=>
       <View style=></View>
       <View style=></View>
   </View>
  

ScrollView

• 내부에 컴포넌트와 뷰들을 자식으로 담을 수 있는, 화면의 스크롤을 사용할 때 쓰는 컴포넌트
• 스크롤 방향은 horizontal을 통해 가로 또는 세로로 변경가능
• https://reactnative.dev/docs/scrollview

Tip

시뮬레이터의 화면이 바뀌지 않는다면 expo를 실행시키는 console창에서 r을 눌러주기

toggle meau는 m, 핸드폰인 경우 흔들면 메뉴가 나타난다.