TIL - 20221229

React Native

React Native는 리액트를 이용해서 모바일 앱을 만들 수 있는 프레임워크이다. 다양한 프레임워크가 있지만

1. SAVING COST 비용 절약

2. EASY TO LEARN 낮은 진입 장벽

등의 장점을 가지고 있다.

Expo Go로 React Native 시작하기

시작 방법으로 크게 Expo Go, CLI 등 크게 4가지 방법이 있으나 쉬운 셋업 및 빠른 초기 개발 등의 장점을 가지고 있는 Expo Go로 프로젝트를 만들어보자. 순서는 다음과 같다.

1. Expo Go 설치

2. Expo 회원가입 및 EAS Free Plan 설정

3. 프로젝트를 생성하면 아래의 화면이 나온다.

Expo Go를 처음 시작 한다면 위의 코드(npm install --global eas-cli)를 터미널에 작성해 실행한다.

프로젝트를 생성할 폴더에 npx create-expo-app 폴더명 을 터미널에 작성해 실행한다.

4. 해당 프로젝트가 설치 되었으면 npm start 명령어를 터미널에 작성해 실행한다.

5. 배포는 eas update 명령어를 터미널에 작성해 실행한다. 현재까지의 프로젝트를 배포한다.

Website link 로 들어가서 Preview를 누르면 QR코드가 나온다. QR코드 인식으로 배포한 사이트에 접속할 수 있다.

React Native 주요 UI 컴포넌트

!주의!

웹 : <div>텍스트</div>

앱 : <View><Text>텍스트</Text></View>

기본 레이아웃 구성 UI 상식

- SafeAreaView : 스마트폰 상단의 노치나 카메라 등에 해당하는 높이까지는 제외하고 Area를 잡는다.

- View 는 기본적으로 flexBox 이며 default flex-direction은 column 이다.

ScrollView · React Native

Component that wraps platform ScrollView while providing integration with touch locking "responder" system.

reactnative.dev

과제 중인데 에러가 많이 난다. 언제 다 하고 자지 ~_~

k1mwnjn