[React-Native] React-Native 란?

본 게시글은 'Nomad Coders'의 강의를 듣고 작성하였습니다.

React Native의 기본 구조는 다음과 같이 설명할 수 있습니다:

1. JavaScript 및 Markup/Styling 레이어:

   • React Native는 JavaScript를 기반으로 작동하며, UI를 정의하는 Markup(예: JSX)과 Styling(스타일링을 위한 CSS와 유사한 문법)을 포함합니다. 이 부분은 React의 표준적인 구성요소입니다.

2. React Native JS 모듈:

   • JavaScript로 작성된 React Native 모듈은 React의 컴포넌트와 기능들을 활용하여 UI와 로직을 작성합니다.
   • 이 모듈은 React Native가 제공하는 API와 연결됩니다.

3. JavaScript 인터프리터:

   • JavaScript 코드는 인터프리터를 통해 실행되며, 이 인터프리터가 React Native의 핵심 역할을 합니다.
   • React Native는 주로 JavaScriptCore 또는 Hermes(React Native의 경량화된 JavaScript 엔진)를 사용하여 코드를 실행합니다.

4. React Native 네이티브 모듈:

   • JavaScript 코드와 네이티브 코드(Android의 Java/Kotlin, iOS의 Swift/Objective-C) 간의 다리 역할을 합니다.
   • 이 모듈을 통해 JavaScript가 네이티브 플랫폼 기능(예: 카메라, GPS)에 접근할 수 있습니다.

5. 플랫폼 API:

   • 플랫폼(API)은 React Native 네이티브 모듈을 통해 접근할 수 있는 기능들입니다. 예를 들어, Android의 Notification Manager 또는 iOS의 Core Location API와 같은 플랫폼 별 네이티브 API에 접근하여 다양한 기능을 구현합니다.

React Native는 JavaScript와 네이티브 코드 간의 브릿지(Bridge)를 중심으로 설계되었으며, 이를 통해 하나의 코드베이스로 Android와 iOS 모두를 지원할 수 있는 애플리케이션을 개발할 수 있습니다.

---

1. React Native는 운영체제와 어떻게 소통하는가?

React Native는 운영체제와 소통하기 위해 Bridge(다리)의 역할을 합니다.

• JavaScript 레벨에서 작성된 UI 및 로직은 React Native의 브릿지를 통해 Android나 iOS의 네이티브 API와 상호작용합니다.
• 이를 통해 JavaScript 코드로 운영체제의 다양한 기능(예: 카메라, GPS, 네트워크 등)을 제어할 수 있습니다.

결론적으로 React Native는 개발자에게 네이티브 기능을 쉽게 사용할 수 있는 환경을 제공하며, 네이티브 코드와 JavaScript 코드 간의 매끄러운 통신을 지원합니다.

2. .apk와 .ipa 파일의 차이점은?

React Native로 개발된 앱은 최종적으로 Android와 iOS에서 실행 가능한 파일 형태로 빌드됩니다.

• .apk (Android Package):

  • Android 기기에서 사용하는 애플리케이션 패키지 파일입니다.
  • 앱 코드와 리소스, 메타데이터가 포함되어 있으며, 이를 설치하면 앱이 실행됩니다.

• .ipa (iOS App Store Package):

  • iOS 기기에서 사용하는 애플리케이션 패키지 파일입니다.
  • 바이너리 코드와 리소스가 포함되어 있으며, 일반적으로 Apple App Store를 통해 배포됩니다.

.apk는 Android, .ipa는 iOS 전용이라는 차이가 있으며, React Native는 하나의 코드베이스로 두 플랫폼을 모두 지원합니다.

---

1. React Native 통신 구조

React와 React Native는 각각 웹과 네이티브 환경에서 컴포넌트를 렌더링하기 위해 다른 경로를 따릅니다.

• React (웹 기반):
  • React 컴포넌트에서 작성된 JavaScript 코드는 ReactJS로 변환된 뒤, 브라우저의 DOM(Document Object Model)과 상호작용하여 웹 UI를 렌더링합니다.
• React Native (모바일 기반):
  • React Native 컴포넌트에서 작성된 JavaScript 코드는 React Native 브릿지를 통해 Android와 iOS의 네이티브 API와 통신합니다.
  • 브릿지(Bridge)는 JavaScript와 네이티브 코드 간의 다리 역할을 하며, 플랫폼별 UI(View)와 기능을 제어할 수 있게 합니다.

이 구조는 React Native가 하나의 JavaScript 코드로 Android와 iOS 모두에 맞는 네이티브 UI를 렌더링할 수 있게 하는 핵심 요소입니다.

---

2. React Native 브릿지 동작 과정

React Native의 브릿지(Bridge)는 JavaScript 코드와 네이티브 코드 간의 데이터를 주고받기 위해 다음 단계를 따릅니다:

1. Native 이벤트 생성:

   • 네이티브 플랫폼(Android/iOS)에서 이벤트가 발생합니다. 예: 버튼 클릭, 센서 데이터 업데이트 등.

2. 데이터 수집 및 알림 (Collect data and notify):

   • 네이티브 이벤트의 데이터를 수집하여 브릿지로 전달합니다.

3. 브릿지에서 직렬화 (Serialized payload):

   • 브릿지가 네이티브 데이터를 직렬화하여 JavaScript 환경으로 보냅니다.

4. JavaScript에서 이벤트 처리 (Process event):

   • JavaScript 레이어에서 데이터를 기반으로 이벤트를 처리합니다.

5. 네이티브 메서드 호출 또는 UI 업데이트 (Call native methods or update UI):

   • JavaScript에서 네이티브 메서드를 호출하거나 UI 변경 요청을 보냅니다.

6. 직렬화된 응답 전송 (Serialized batched response):

   • 요청에 대한 응답이 브릿지에서 직렬화됩니다.

7. 명령 처리 (Process commands):

   • 네이티브에서 명령을 처리하고 UI 업데이트에 필요한 작업을 실행합니다.

8. UI 업데이트 (Update UI):

   • 네이티브 환경에서 UI를 업데이트하여 사용자에게 결과를 표시합니다.

이런 동작 방식은 React Native가 JavaScript 기반의 비즈니스 로직과 네이티브 플랫폼의 고유 기능을 원활하게 연결하도록 돕는 핵심 메커니즘입니다.