[React Native] React Native 소개 및 개발 환경 구축

2021. 12. 29. 19:17React Native/Basic

1. React Native 기본 원리

RN - 모바일 웹/앱, 하이브리드 앱이 아닌 native 앱을 제작하기 위한 오픈소스 프레임워크 

 

ios 네이티브 앱은 object c, swift를 ios에 타겟팅해주는 컴파일러 존재.

android의 경우 java, kotlin을 안드로이드에 타겟팅해주는 컴파일러 존재.

 

  • High Level 측면

크로스 플랫폼인 RN은 단지 javascript 개발 코드를 각 os 플랫폼에 타겟팅해줌.

 

  • Low Level 측면

RN에서는 앱을 빌드할 때 앱의 전체 로직을 가지는 js bundle을 만들고 이 번들을 각 플랫폼에 심어주게 됨.

JS 번들은 JS Thread에 의해 실행되는데 각 플랫폼에서 앱을 실행하기 위한 Native Thread는 JS Thread와 직접 커뮤니케이션 할 수 없고, RN에서 제공하는 Bridge에 의해 상호작용하게 됨.

 

RN로 각 플랫폼에 네이티브 앱 제작이 가능한 이유 - Bridge 제공하기 때문

 

 

 

* JS 코드가 스마트폰에서 접하는 앱이 되기까지 이러저러한 프로세스를 거친다고만 생각하면 됨.

 

그럼 JS 코드, RN API, JS Bundle을 만드는 법에 대해 알아야 함.

 

 


 

2. Expo CLI vs. React Native CLI

  Expo CLI React Native CLI
Pros 개발 환경 구축 용이

실제 개발이 쉽고 편함
Expo로는 접근하지 못하는 Native 기능에 접근 가능 (Native 모듈 사용 자유도 높음)

원하는 언어로 추가 작성 가능 (Custom Native 모듈 사용 가능)

필요한 기능이 있는 경우 모듈을 직접 제작 가능

OS Layer와 직접적인 상호작용 가능
Cons OS Layer와 직접적인 상호작용 불가능 (Java, Kotlin, obj-C, Swift로 추가 작성 불가)

Expo에서 제공해주는 모듈만 사용 가능

Expo Client에서는 잘 동작하지만 실제 Simulator 및 단말기에서 잘 동작하지 않을 수 있음

개발 관점에서의 자유도 낮음
초기 개발환경 구축 및 실제 앱 개발 시 다소 시간 소요

 

React Native CLI 사용하기를 권장.

React Native CLI를 사용할 경우 MAC 환경에서 사용하는 것을 권장.