네이티브앱 통합 관점에서 RN vs Flutter

 

요약) 

가장 중요한 차이는
RN은 JavaScript 런타임과 네이티브 의존성을 따로 관리 하는 반면, Flutter는 자체 내장 엔진에서 모든 의존성을 자체 관리

	React Native	Flutter
의존성관리	JavaScript 런타임과 네이티브 의존성을 Podfile로 따로 관리	- 모듈 생성시 생성된 .ios/Flutter/podhelper.rb를 통해 CocoaPods 의존성을 자동으로 관리 - Flutter 모듈의 모든 네이티브 의존성을 캡슐화
통합방식	기존 iOS 프로젝트의 Podfile과 RN의 Podfile을 병합해야 함 Why? ) React Native는 JavaScript 코드를 실행하기 위해 React, React-Core, React-RCTBridge 등 다양한 네이티브 모듈에 의존 CocoaPods으로 개별 설치해야 함 (ios폴더 내 Podfile이 RN의 네이티브 의존성을 관리) => 기존 iOS 프로젝트와 통합하려면, 기존 iOS프로젝트의 Podfile과 React Native에서 사용하는 Podfile을 통합해주어야함.	Podfile에 Flutter 모듈 경로만 추가하면 됨 Why? ) Flutter는 자체 내장 엔진을 가지고 있음 => iOS프로젝트의  Podfile에 Flutter 모듈 경로만 추가하면 됨
통합용 이성	RN 프로젝트의 Podfile에서 사용하는 라이브러리와 기존 프로젝트의 동일한 라이브러리가 충돌	Flutter모듈의 독립적인 의존성 관리로 의존성 충돌 가능성이 낮음
빌드성능	Bridge의 오버헤드로 인해 상대적으로 느림	Flutter 엔진 내장으로 네이티브와 거의 동일한 성능 제공
통신방식	CocoaPod을 통해 설치된 React-RCTBridge를 통해 JavaScript와 네이티브간 통신	MethodChannel을 통해 Dart와 네이티브 간 직접적으로 통신

 

 

환경셋팅만 잘 이루어진다면.. RN이 더 나을지도 모르겠다

 

 

---

 

( GPT의 반대 관점 !!!! 혼란스럽다 )

 

iOS와 Android의 네이티브 기능을 많이 활용해야 하는 경우 React Native를 선호할 수 있는 이유는 다음과 같습니다:

1. 네이티브 코드와의 손쉬운 통합
React Native는 기본적으로 네이티브 모듈(Swift, Objective-C, Java, Kotlin)과 매우 쉽게 연동할 수 있는 구조를 제공합니다.
• iOS와 Android 네이티브 모듈 확장: 네이티브에서 직접 구현한 기능을 React Native에서 호출할 수 있어, 플랫폼에 특화된 기능을 개발하고 통합하기에 적합합니다.
• 예: iOS의 Core Location, Face ID, Android의 CameraX 등의 플랫폼별 API를 React Native의 네이티브 모듈로 래핑하여 사용할 수 있습니다.
(ReactNative의  iOS 폴더 내에서 네이티브 모듈을 구현한 후, ReactNative에서 바로 호출하는 구조. 네이티브 프로젝트에서 코드관리X  반면 Flutter는 네이티브 프로젝트에서 플러터ViewController를 생성한 뒤, MethodChannel로 받아주어야함
>> 예시코드는 밑에 있음) 

 

2. 기존 네이티브 프로젝트와의 병합 가능성
React Native는 기존의 네이티브 앱 프로젝트에 일부 화면으로 통합하는 데 적합합니다.
• 이미 iOS 또는 Android로 개발된 앱이 있을 때, 특정 화면이나 기능을 React Native로 구현해 추가할 수 있습니다.
• iOS ViewController나 Android Activity/Fragment를 React Native 화면과 결합하는 것이 비교적 간단합니다.

3. 커스텀 네이티브 코드 개발이 용이
React Native는 네이티브 API에서 제공하지 않는 고유 기능을 개발해야 할 때도 유연합니다.
• Custom Native Module: iOS와 Android에서 별도로 네이티브 기능을 개발한 후, JavaScript에서 호출할 수 있도록 연결할 수 있습니다.
• 예: iOS에서 Metal API로 고성능 그래픽을 구현하거나, Android에서 BLE(Bluetooth Low Energy) 기능을 네이티브로 구현한 후 React Native와 연동 가능.

 

4. 네이티브 코드와 JavaScript 간 통신 구조 (Bridge)
React Native는 Bridge 아키텍처를 사용하여 JavaScript와 네이티브 간 데이터를 주고받을 수 있습니다.
• 복잡한 네이티브 로직은 네이티브 코드로 구현하고, React Native는 UI 및 간단한 로직을 처리하는 방식으로 역할 분리가 가능합니다.
• 이 방식은 성능 병목 현상을 줄이고 네이티브 기능을 쉽게 호출할 수 있도록 합니다.

5. 풍부한 네이티브 플러그인 생태계
React Native는 커뮤니티에서 개발된 수많은 네이티브 플러그인을 제공합니다.
• 네이티브 기능(카메라, 지도, 파일 저장소 등)을 구현할 때, 기존 플러그인을 활용하면 추가 구현 없이 바로 사용할 수 있습니다.
• 예: react-native-camera, react-native-maps, react-native-fs 등이 있으며, 필요한 경우 직접 커스터마이징도 가능합니다.

6. 코드 재사용성 극대화
React Native는 iOS와 Android에 공통 코드베이스를 사용하면서도, 플랫폼별 네이티브 코드와 연동이 가능하기 때문에, 네이티브 기능을 활용하면서도 중복 작업을 최소화할 수 있습니다.

7. React Native의 한계점
• Bridge 기반 구조로 인해, 네이티브와 JavaScript 간 데이터 통신 속도가 병목 현상을 유발할 수 있습니다. 이는 매우 고성능을 요구하는 앱에서는 문제가 될 수 있습니다.
• 복잡한 네이티브 기능을 많이 사용하는 경우, 네이티브 코드 작성량이 많아져 크로스플랫폼의 이점이 줄어들 수 있습니다.

 

 

---

Flutter와 비교

Flutter도 네이티브 기능 연동이 가능하지만, React Native보다 초기 설정이 복잡하고, 플랫폼별 코드를 작성할 때 조금 더 많은 작업이 필요합니다.
• Flutter는 네이티브 코드와 연동하기 위해 MethodChannel을 사용하지만, 네이티브 개발 경험이 없는 개발자에게는 추가 학습 부담이 될 수 있습니다.
• 반면 React Native는 기존 네이티브 코드 경험을 살려 더 직관적으로 접근할 수 있습니다.

---

- Flutter는 MethodChannel을 사용하여 Flutter와 네이티브 간의 직접적인 통신을 설정

- React Native는 네이티브 모듈을 통해 Bridge 방식으로 통신 >> 초기에 작업해야 할 설정의 복잡성과 사용 편의성에서 차이가 발생

1. Flutter: MethodChannel 사용
Flutter는 네이티브와의 통신을 위해 MethodChannel이라는 구조를 사용
• Flutter와 네이티브 간 통신을 위한 MethodChannel 설정.
• 플랫폼별로 명시적으로 MethodHandler를 작성하여 각 네이티브 기능을 처리.
• 결과값을 다시 Flutter로 반환.

[Flutter 코드]

import 'package:flutter/services.dart';

class NativeUtils {
  static const platform = MethodChannel('com.example/native');

  // 네이티브 메서드 호출
  static Future<String> getBatteryLevel() async {
    try {
      final String batteryLevel = await platform.invokeMethod('getBatteryLevel');
      return 'Battery level: $batteryLevel%';
    } catch (e) {
      return 'Failed to get battery level: $e';
    }
  }
}

[ iOS (Swift): MethodChannel 구현]

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        let controller: FlutterViewController = window?.rootViewController as! FlutterViewController
        let methodChannel = FlutterMethodChannel(name: "com.example/native",
                                                  binaryMessenger: controller.binaryMessenger)

        methodChannel.setMethodCallHandler { (call: FlutterMethodCall, result: @escaping FlutterResult) in
            if call.method == "getBatteryLevel" {
                self.getBatteryLevel(result: result)
            } else {
                result(FlutterMethodNotImplemented)
            }
        }

        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }

    private func getBatteryLevel(result: FlutterResult) {
        let device = UIDevice.current
        device.isBatteryMonitoringEnabled = true

        if device.batteryState == .unknown {
            result(FlutterError(code: "UNAVAILABLE", message: "Battery info unavailable", details: nil))
        } else {
            result(Int(device.batteryLevel * 100))
        }
    }
}

• MethodChannel 작성: Flutter와 네이티브 간 직접적인 메시지 전달 방식을 설정해야 하므로 네이티브 처리에 대한 이해가 필요
• 플랫폼별 코드 작성: iOS와 Android 각각에 대해 별도의 코드 작성이 필수

 

2. React Native: Native Modules 사용

- React Native는 네이티브와 통신하기 위해 Native Module이라는 방식을 사용
- Bridge 아키텍처를 통해 JavaScript와 네이티브 코드 간의 통신을 추상화하여 더 직관적으로 접근

React Native 네이티브 연동 단계
1. RN프로젝트 내에서 ios/android폴더 내에 네이티브 모듈 정의
2. JavaScript에서 NativeModules를 통해 네이티브 호출.
3. 네이티브 코드에서 처리 후 결과 반환.

React Native 에서 네이티브 모듈 호출

import { NativeModules } from 'react-native';

const { NativeUtils } = NativeModules;

export const getBatteryLevel = async () => {
  try {
    const batteryLevel = await NativeUtils.getBatteryLevel();
    console.log(`Battery level: ${batteryLevel}%`);
    return batteryLevel;
  } catch (error) {
    console.error('Failed to get battery level:', error);
    return null;
  }
};

ReactNative의  iOS 폴더 내에서 네이티브 모듈 정의

@objc(NativeUtils)
class NativeUtils: NSObject {
    @objc
    func getBatteryLevel(_ resolve: @escaping RCTPromiseResolveBlock,
                         reject: @escaping RCTPromiseRejectBlock) {
        let device = UIDevice.current
        device.isBatteryMonitoringEnabled = true

        if device.batteryState == .unknown {
            reject("UNAVAILABLE", "Battery info unavailable", nil)
        } else {
            resolve(Int(device.batteryLevel * 100))
        }
    }

    @objc
    static func requiresMainQueueSetup() -> Bool {
        return false
    }
}

iOS네이티브 프로젝트에서  모듈 등록 

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(NativeUtils, NSObject)

RCT_EXTERN_METHOD(getBatteryLevel:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)

@end

 

React Native 연동의 학습 부담

• React Native는 네이티브 모듈을 생성하면 해당 기능이 JavaScript로 자동 연결되므로 설정이 간소화됩니다.
• 플랫폼별 코드 작성이 필요하지만, 기존 네이티브 개발자라면 친숙한 환경에서 작업할 수 있습니다.
• JavaScript로 네이티브 모듈을 쉽게 호출할 수 있으므로 사용이 직관적입니다.

비교: Flutter vs React Native

- 설정 복잡성 측면: Fluutter는 MethodChannel 생성, 각 네이티브 프로젝트 코드에서 MethodChannel을 받아서 처리해야함

(플랫폼별 코드를 각각 작성)

반면 RN은 RN폴더 내에서 네이티브 모듈 생성 후 바로 사용 가능 (호출이 직관적 ??)

 

>> iOS/Android의 네이티브 기능 연동이 빈번하다면 React Native가 더 적합할 가능성이 높다 ???

---

 

(참고)

 

Flutter의 자체 엔진이 주는 장점

Flutter는 React Native와 달리 자체 엔진을 포함하고 있어 여러 면에서 차별화됩니다.

4.1. 자체 엔진의 특징

• Flutter는 C++ 기반의 렌더링 엔진을 사용하여 모든 UI 및 로직을 실행합니다.
• Dart VM은 Flutter 엔진 내부에서 동작하며, UI를 직접 그리는 방식(Skia)을 사용합니다.
• 네이티브 플랫폼의 컴포넌트를 활용하지 않고, 완전히 독립적인 렌더링 방식을 사용합니다.

4.2. 장점

1. 플랫폼 독립성:
   • Flutter 엔진은 iOS와 Android에서 동일하게 동작하므로, UI 일관성이 유지됩니다.
   • 네이티브 의존성이 최소화되며, 플랫폼 간 동작 차이를 걱정할 필요가 없습니다.
2. 고성능:
   • React Native는 JSCore와 네이티브 간 통신(Bridge)에 오버헤드가 발생하지만, Flutter는 자체 엔진 내에서 모든 UI 렌더링과 로직 처리를 수행하므로 네이티브와 거의 동일한 성능을 제공합니다.
3. 통합 간소화:
   • Flutter는 .ios/Flutter를 통해 모든 의존성을 캡슐화하여 기존 네이티브 프로젝트와의 충돌 가능성을 최소화합니다.
   • Podfile에 Flutter 모듈 경로를 추가하는 것만으로도 통합이 완료됩니다.

 

---