[RN] React Native의 정의와 장단점
React Naitve란? 2015년 3월 페이스북에 의해 공개된 오픈소스 모바일 어플리케이션 프레임 워크 사용자 인터페이스를 만드는 React에 기반을 두고 제작 웹 브라우저가 아닌, iOS와 Android에서 동작하는
suji-sw.tistory.com
위의 포스팅을 통해 React Native의 정의와 장점, 단점 등을 알아보았다.
React Native 개발자라면 해당 프레임워크가 어떻게 작동 하는지 알 필요성이 있기 때문에 해당 포스팅을 작성하도록 하겠다.
React Native의 작동 방식
React Naitve는 크로스 플랫폼 앱 (Cross-Platform App)으로, javascript 언어로 iOS와 Android 플랫폼을 동시에 개발할 수 있다는 큰 장점을 가지고 있다. 그러나 Android app을 만들기 위해서는 java나 코틀린을 사용해야 하며 iOS app을 만들기 위해서는 Swift를 사용해야 한다! 어떻게 javascript를 사용하는 React Native가 두 플랫폼을 동시에 개발할 수 있게 해준다는 것일까?
정답은, React Native에서 제공하는 특수한 코드, 구성 요소가 네이티브 플랫폼에서 이해할 수 있는 코드로 변환할 수 있게 도와주며, 결국 각각의 플랫폼에서 개발을 할 수 있도록 만들어준다는 것이다!
우리가 React Native에서 apk, ipa 즉 android, ios 앱을 추출하기 위해서는 빌드 & 컴파일하는 과정이 필요하다.
이때, 아래와 같은 단계가 작동된다.
작동 원리
- React Native의 JS 코드 작성 (UI, JS)
- React naive API 사용
- JS Bundle 형태로 ios, android 플랫폼에 제공
- 플랫폼 내부에서 JS Thread와 Native Thread를 소통시켜주는 Bridge가 존재하여 소통
- 기기에서 앱을 구동
View, Text, Image 등과 같은 UI 요소 들은 각 네이티브 앱으로 컴파일이 진행되지만,
연산이나 알고리즘을 담당하는 javascript 부분은 컴파일이 되지 않는다.
대신 React native가 자체적으로 호스팅하는 특별한 스레드에서 javascript가 실행된다.
이를 브릿지(bridge)라고 부른다.이는 iOS, Android 플랫폼의 네이티브 UI 요소에 접근하는 인터페이스를 제공한다.
참고 사이트
'프로그래밍 언어 > React' 카테고리의 다른 글
| [React] 환경 변수 파일 .env란? (0) | 2023.07.07 |
|---|---|
| MobX 상태 관리 라이브러리 (0) | 2023.04.11 |
| [RN] 상태관리 라이브러리 Redux란 ? (0) | 2023.03.02 |
| [RN] React Query 기초 지식 (0) | 2023.02.15 |
| [RN] Hooks (useState, useEffect, useRef) (0) | 2023.02.15 |