TIL: React Native (2) 프로젝트 생성 및 UI 코드 작성, snack- 220727

Lumpen·2022년 7월 28일
0

TIL

목록 보기
101/244
post-custom-banner

snack

웹 브라우저에서 React 어플리케이션을 만들 수 있게 해주는 온라인 코드 에디터
웹이라 아이패드 등으로도 작성 가능
https://snack.expo.dev

로그인을 하거나 Expo Go 로 코드에 대한 QR코드를 스캔하면 된다

React Native 프로젝트 생성

React Native code

React Native는 웹이 아니기 때문에 div 등의 html 태그가 없다
대신에 View 라는 컴포넌트 등이 존재함

  1. View는 컨테이너로 모든 화면을 View 컴포넌트 로 구성하게 된다
  2. text는 항상 Text 컴포넌트에 들어가야 한다
  3. 웹에서의 일부 스타일은 존재하지 않는다 (border 등)

React Native에서는 css에 대한 오류에 대해서도 오류 코드를 제공

StyleSheet.create()

style object를 생성하는 메소드
내부에 객체 형태로 style에 대한 정의를 하고, 모듈처럼 가져다 쓸 수 있음

  1. 자동완성 기능
  2. 스타일 컴포넌트 정리 용이
  3. 프로퍼티 명을 자유롭게 작성 가능

하지만 component의 style 속성 내부에 바로 코드 작성도 가능하다 -> StyleSheet.create 메소드가 꼭 필요한 것은 아님

StatusBar

상태 표시줄
상태 표시줄은 리액트 네이티브에서 제공하지 않는다
-> 3rd-party 패키지임
StatusBar 컴포넌트는 코드 위치에 관계 없이
스마트폰의 상태 표시줄을 구현하는데 쓰인다

일부 컴포넌트는 상태표시줄과 같이 동작한다

profile
떠돌이 생활을 하는. 실업자, 부랑 생활을 하는
post-custom-banner

0개의 댓글