React Native 시작하기

Jay·2023년 3월 28일
1

ract-native

목록 보기
1/1

React Native

IOS 와 Android app 을 하나의 코드로 앱을 만들어 낼 수 있다(생산성 up).

리엑트 네이티브 앱은 js 로 개발하는데 native 코드 변환 하여 동작 가능하다.
이는 Bridge 라는 녀석 덕분이다.

Bridge 는 js 코드를 이용해 네이티브 계층과 통신하는 역할을 한다.
그리고 자바스크립트 스레드 정보를 받아 네이트브에 전달한다.
현재, cpu 집중적인 작업은 아직 Flutter(Bridge가 존재 x) 성능이 좋다고 한다.
하지만, Meta(구 Facebook) 은 향후 bridge 를 제거하고 js interface라는것을 구현하여 성능 향상을 위한 작업을 하고 있다고 한다. Meta 홧팅.!

- React Native앱이 실행되는 과정

  1. 앱이 시작하면서 Main Thread(UI Thread)가 실행되며 JavaScript 번들을 로드한다.
  2. JavaScript번들의 로드가 완료되면 Main Thread(UI Thread)는 JavaScript코드들을 JavaScript Thread로 보낸다.
  • JavaScript Thread가 무거운 작업을 하더라도 Main Thread(UI Thread)가 문제를 일으키지 않기 때문이다.
  1. React가 렌더링을 시작하면서 조정자(Reconciler)는 diffing을 시작한다. 새로운 virtual DOM(layout)을 생성하고 변경점들을 다른 thread(Shadow Thread)로 전달한다.
  2. Shadow Thread가 레이아웃의 계산을 끝마치면 레이아웃의 parameter혹은 object를 Main Thread(UI Thread)에 보낸다.
  3. Main Thread는 shadow thread가 보낸 레이아웃을 화면에 렌더링한다.

-RN 프로젝트 개발엔 두가지 방법이 있다고 한다.

  1. EXPO CLI
    *장점 : 환경설정부터 배포까지 간단하고 EXPO GO 어플로 기기 상관 없이 프로젝트 실행 가능

    *단점 : 기본 제공되는 API만을 사용해야됨.(IOS OR Android 추가 기능 업데이트시 expo 에 업데이트 될때 까지 기다려야함.)

  2. REACT NATIVE CLI
    *장점 : 고도화 된기능 개발. 다양한 라이브러리 사용 가능, 네이티브 모듈 연결 가능.

*단점 : 라이브러리 적음, Android와 xcode 를 설치해야됨!.. ipone 개발엔 mac 이 필수....

in app 결제 같은 라이브러리는 RN CLI로 해야한다.
그러나, Eject 작업을 하게되면 expo로 개발된것을 RN CLI 전환 가능.!

이후, node js, VSC 가 설치가 완료가 되었다면, vsc terminal 에서 npx create-expo-app 프로젝트명 으로 만들고, 프로젝트 실행시 npx expo start 명령어를 실행하면 qr 코드가 터미널에 뜨게 되는데, 이 qr 코드는 Expo go 어플이 깔린 스마트폰에 인식하여 결과 화면을 볼수있다.

profile
React js 개발자

0개의 댓글