리액트 네이티브 - 기본

expo 앱과 watchman 을 이용해서 리액트 네이티브 찍어먹기를 시작해보자.
https://docs.expo.dev/get-started/set-up-your-environment/
expo는 앱의 구성환경 중 자바스크립트를 제외한 모든 구성을 가지고 있는 환경을 제공해주는 플랫폼이다! 그래서 개발자는 코드만 신경쓰면 되는 유용한 도구라고 한다!

필요한 것들 깔고 프로젝트를 생성했다. 프로젝트 처음 생성할 때는 왜 이렇게 설레는지 모르겠다. 🤩

오~ cra 했을 때 처럼 프로젝트가 만들어져있다.

이제 터미널을 열어서 로그인을 하고 npx expo start를 하면 핸드폰의 expo 앱에 내가 만든 프로젝트의 이름이 뜬다. 눌러보면 웹 화면과 같은 화면을 볼 수 있었다.

index.tsx 에서 코드를 바꾸고 저장하면 실행된 화면에서 바로 바뀌는 걸 볼 수 있었다.

기본!

import { StyleSheet, Text, View } from 'react-native'

• 웹사이트가 아니기 떄문에 div태그는 없다!
• view 태그가 있다 : 컨테이너의 역할
• 모든 텍스트는 <Text>안에 들어가야 한다.
• StyleSheet.create 를 통해 스타일 객체를 만들어줄 수 있다.
  - style={styles.text} / {styles.container} 로 스타일 줄 수 있다.
  • StyleSheet.create 를 쓰지 않고 그냥 스타일링 객체를 만들어서 적용해줘도 되는데 자동 완성 기능이 적용되지 않는다.

- 위와 같은 방법은 자동완성과 스타일 속성을 깔끔하게 유지하는데 장점이 있지만 꼭 이렇게 할 필요는 없다! 컴포에 바로 스타일링해도 됨.

태그 안에 style 로 스타일링 주는 게 꼭 className 으로 스타일링하던 테일윈드랑 비슷해서 익숙했다. 근데 여기서는 일일이 fontSize=29 같이 넣어줘야되니까 스타일링 많이 하면 더 거대해지겠지. 😗

flex

웹에서는 flex direction이 Row가 기본값
RN에서는 Column이 기본값 + 모든 뷰가 기본 적으로 Flex Container다.