← 개발 기록

React Native 앱 실행 과정

1. 사용자 상호작용

  • 사용자가 디바이스에서 React Native 앱 아이콘을 탭합니다.

2. 운영체제 반응

  • iOS 또는 Android 운영체제가 앱 실행 요청을 인식합니다.
  • 운영체제는 앱에 메모리를 할당하고 실행 프로세스를 시작합니다.

3. 네이티브 코드 초기화

  • 앱의 네이티브 부분(iOS의 경우 Objective-C/Swift, Android의 경우 Java/Kotlin)이 먼저 로드됩니다.
  • 네이티브 코드는 React Native 브릿지와 필요한 네이티브 모듈을 초기화합니다.

4. JavaScript 엔진 시작

  • 네이티브 코드는 JavaScript 엔진(일반적으로 JavaScriptCore 또는 Hermes)을 시작합니다.
  • 이 엔진은 React Native 앱의 JavaScript 코드를 실행할 환경을 제공합니다.

5. JavaScript 번들 로드

  • 미리 컴파일된 JavaScript 번들(보통 index.bundle)이 로드됩니다.
  • 이 번들은 앱의 모든 JavaScript 코드와 필요한 React Native 라이브러리를 포함합니다.

6. React Native 초기화

  • React Native 프레임워크가 초기화됩니다.
  • 이 과정에서 React 렌더러, 컴포넌트 매니저, 모듈 레지스트리 등이 설정됩니다.

7. 앱 진입점 실행

  • JavaScript 코드의 진입점(보통 index.js 또는 App.js)이 실행됩니다.
  • 이 시점에서 React 컴포넌트 트리의 초기 렌더링이 시작됩니다.

8. 브릿지 통신 시작

  • React Native 브릿지를 통해 JavaScript와 네이티브 코드 간의 통신이 시작됩니다.
  • 이를 통해 UI 업데이트, 네이티브 API 호출 등이 가능해집니다.

9. 초기 UI 렌더링

  • React Native는 JavaScript에서 정의된 컴포넌트를 네이티브 UI 요소로 변환합니다.
  • 이 과정은 Shadow 스레드에서 레이아웃 계산을 수행하고, 메인 UI 스레드에서 실제 렌더링을 합니다.

10. 네이티브 모듈 초기화

  • 앱에서 사용하는 추가적인 네이티브 모듈(예: 카메라, 위치 서비스 등)이 초기화됩니다.

11. 데이터 로딩

  • 필요한 경우, 앱은 로컬 저장소나 원격 서버로부터 초기 데이터를 로드합니다.

12. 스플래시 스크린 제거

  • 초기화가 완료되면, 운영체제는 스플래시 스크린을 제거합니다.

13. 앱 표시

  • 사용자에게 완전히 렌더링된 앱 UI가 표시됩니다.

14. 이벤트 루프 시작

  • JavaScript 이벤트 루프가 시작되어 사용자 상호작용, 애니메이션, 네트워크 요청 등을 처리할 준비를 합니다.

이 전체 과정은 기기의 성능, 앱의 복잡성, 초기 데이터 로딩 요구사항 등에 따라 수백 밀리초에서 몇 초까지 걸릴 수 있습니다.