React Native 입문
npx react-native doctor 로 개발도구의 설치 상태를 체크하고,
npx react-native start 으로 메트로서버를 실행시킨후
npx react-native run-android 로 Andorid 앱을 빌드하고 실행한다.
일단 따라하면 뭔가 실행이 되는 것 같은데 프로세스를 모르니 디버깅이 잘 안된다.
전체적으로 개념을 잡아보자
목차
0. React Native 앱 구조
1. Metro 가 서버인 이유
2. 앱 빌드 과정 이해하기
3. 앱 빌드에 필요한 개발 도구들
0. React Native 앱 구조
[25.4.4 보충]
앱개발을 한다면 Java Kotlin 으로 Android 개발을 한다. XML 로 화면 UI 를 구성한다. 혹은 Swift Objective-C 개발을 한다. Storyboard 나 SwiftUI 로 UI를 구성한다.
즉 네이티브 언어로 UI와 로직을 모두 구현한다
[JS Code]
|
| (실행)
v
[JS Engine: Hermes or JSC]
|
| (function call, event)
v
[Bridge]
|
v
[Native Modules (Camera, Vibration 등)]
|
v
[Java / Kotlin / Swift / ObjC code]
이 때 화면 UI는 JS 코드에 맡기고 카메라, 센서 등 네이티브 기능은 JS에서 호출하는 식으로 React Native 는 동작한다.
따라서 Hermes 같은 JS엔진이 포함되어야할 것이고 '브릿지' 를 통해 네이티브 모듈을 호출한다.
네이티브 모듈은 JS 코드에서 사용하려는 네이티브 기능 (카메라, 위치, 센서 등) 을 미리 Kotlin Swift 등 네이티브 언어로 구현한 모듈이며 JS가 호출하는 대상이다.
+---------------------------------+
| React Native 앱 |
+---------------------------------+
| JS 코드 (React, UI, Logic) |
| |
| JavaScript Engine (Hermes) |
| |
| React Native Runtime |
| - UIManager |
| - Event Dispatcher |
| - Native Modules (Camera) 등 |
| |
| Android/iOS Native Platform |
+---------------------------------+
따라서 React Native 앱을 빌드하면 JS 코드 뿐 아니라 'JS 엔진' 과 'React Native 의 런타임' 을 모두 포함해서 하나의 앱(.apk/.ipa)으로 만든다.
이때 React Native Runtime 이란 React Native 앱이 동작하기 위해 포함되는 Android, iOS 네이티브 코드 기반의 라이브러리들을 말한다.
여기엔 Core Modules, Bridge, Event Dispatcher... 등이 있는데
가령 JS에서 <Text /> 태그를 쓰면 실제 네이티브 컴포넌트로 매핑시켜주는 것이 Core Modules다. 여튼 이런게 RN 런타임이며 브릿지도 React Native Runtime 안에 있어서 JS가 네이티브 모듈을 부를 수 있게 한다.
1. Metro 가 서버인 이유
리액트 웹 개발 생태계에서는 웹팩이 바벨을 사용해서 코드를 트랜스파일링하고 코드를 번들링을 해서 브라우저에서 실행시킨다. (브라우저에서 Webpack 이 JS를 번들링?)
* 바벨은 TS,ES6+ 를 ES5로 변환, JSX를 JS로 변환, 코드 최적화 등의 역할을 수행
* 웹팩은 번들링을 주로 담당. 코드스플리팅이나 트리 쉐이킹(번들 크기 최적화) 도 수행.
이때 Webpack 개발서버가 개발 중인 코드 변경 사항을 감지하되 상태를 유지하며 변경된 모듈(컴포넌트)만 브라우저에 자동 반영해주는 핫 리로딩을 제공한다. (물론 프로덕션에서는 Nginx 나 Vercel 등에 올려야하고)
마찬가지로 Metro 는 리액트네이티브의 '번들러' 로서 바벨을 사용해 JS를 트랜스파일링하고 번들링을 하여 네이티브 앱에서 실행할 수 있도록 변환을 한다.
Metro는 일종의 '개발 서버' 역할을 하는데 웹서버처럼 일반 사용자의 요청에 따라 HTML, CSS 같은 정적파일에 대한 응답을 처리하는게 아니라 Reat Native 가 일종의 클라이언트가 되어서 JS 번들 파일만 제공받는다.
다시말해 Metro 는 일종의 API서버와 같이 http://localhost:8081/index.bundle?platform=ios&dev=true 같이 URL 을 통해서 번들을 제공하며, React Native 앱은 이 URL 을 통해 번들을 요청하여 받아간다.
개발자가 JS/TS 코드를 변경하면 Metro 가 이 변경사항을 감지한 후 다시 번들링을 하여 React Native 앱에 전송하며 이 과정에서 Hot Reloading 과 Fast Refresh 를 지원해주는 것. 즉, JS/TS 코드가 변경되면 즉시 에뮬레이터에 반영된다.
(한편 메트로는 앱 실행중 오류가 발생하면 터미널에 로그를 출력해 디버깅정보를 보여주는 역할도 함)
*React Native 앱이란 iOS, Android 에뮬레이터나 디바이스를 의미한다.
* Hot Reloading 은 특정 컴포넌트만 새로고침하여 상태 유지를 하는 것, Fast Refresh 는 파일저장시 전체 컴포넌트를 다시 랜더링하여 코드 변경사항을 즉시 반영하는 것.
그런 의미에서 메트로는 서버다. 일종의 라이브서버다.
실제 앱을 빌드하게 되면 Metro 는 더 이상 필요하지 않고 번들링된 JS가 네이티브 앱 내부에 포함되게 된다.
2. 앱 빌드 과정 이해하기
한편 JS는 앱의 UI와 로직을 주로 담당하지만 API, Bluetooth,GPS 같은 네이티브 기능을 담당하는 Java/Kotlin 그리고 Swift/Obj-C 코드도 존재한다.
Metro가 JS/TS 코드를 번들러로 빠르게 빌드(번들링, 압축, 트랜스파일링=바이트코드로 변환? ES5?)해서 React Native 앱에 index.bundle.js 와 같은 번들 형태로 전달해준다면,
Java/Kotlin (Android) 를 컴파일하고 패키징하여 빌드하는 주체가 Gradle 이고 그 형태는 .apk 다.
Swift/Obj-C (iOS) 를 컴파일하고 패키징하여 빌드하는 주체는 Xcode 이고 그 형태는 .ipa 다.
*컴파일하여 바이트코드(.class)를 생성하고 각 기종별 플랫폼에 맞는 네이티브 코드로 전환된다.
(JVM이 바이트코드를 읽고 실행하는 시점에 JIT 컴파일러가 네이티브 코드로 변환)
(Swift/Obj-C는 실행시점에서 별도의 가상머신 없이 직접 네이티브 코드로 컴파일)
* 곧 Java/Kotlin 은 가상머신환경에서 실행되며 Swift/Obj-C는 직접 네이티브 환경에서 실행되는 것
*패키징이란 빌드된 코드와 리소스(이미지, 폰트, 아이콘, JSON 데이터 등)를 묶는 과정
*네이티브 코드란 특정 OS나 하드웨어 아키텍처에 맞춰 실행될 수 있는 기계어
이 컴파일 과정은 느리며 네이티브 코드 수정할 때나 재빌드하게 되고 일단 빌드가 되면 네이티브 코드가 Hermes, V8 같은 JS 엔진을 실행하고 JS 코드가 네이티브 모듈(카메라 API 와 같은)을 호출하여 앱을 실행한다.
*Hermes 는 React Native 전용 JS 엔진으로 JS를 실행전에 바이트코드로 변환한다.
*네이티브 모듈은 JS와 네이티브 간 브릿지 역할을 하는 모듈이다 ( JS는 네이티브 기능을 직접 실행할 수 없고, 네이티브 코드와 연결되는 Bridge 를 통해 실행)
앱이 실행되면 네이티브 코드가 JS엔진(Hermes?) 를 실행한다.
앱이 네이티브 코드를 다시 빌드하는게 아니라 메트로 서버에서 변경된 JS만 받아 실행하므로 빠르다.
3. 앱 빌드에 필요한 개발 도구들
메트로 서버가 JS 번들을 쏴주고 Gradle 이나 Xcode 가 네이티브 코드를 빌드한다.
해당 과정을 생각해보면 패키지 관리를 위해 npm , 그리고 JS 실행을 위해Node.js 가 필요할 것이고
네이티브 코드 컴파일을 하려면 JDK 가 필요할 것.
Android 앱을 실행하려면 Android Studio 가 필요하며
Andorid SDK 는 Android 앱을 빌드하고 실행할때 사용된다.
Adb는 Android 기기와 PC간 통신도구
Common
✓ Node.js - Required to execute JavaScript code
✓ npm - Required to install NPM dependencies
Android
✓ JDK - Required to compile Java code <-> Xcode Command Line Tools 이 함
✓ Android Studio - Required for building and installing your app on Android <-> Xcode 가 함
✓ Android SDK - Required for building and installing your app on Android <-> Xcode 가 함
✓ Adb - Required to verify if the android device is attached correctly <-> Xcode 가함
'[개발일지] > 데이팅 앱' 카테고리의 다른 글
| React Native CLI 에서 Expo 로 갈아탄 썰 (맥북이 답인가) ※20page 분량 긴글주의※ (1) | 2025.04.06 |
|---|