iOS 네이티브 프로젝트에 통합 - RN, Flutter 환경셋팅 비교

 

결론: RN은 초기설정이 말이 안된다.

온갖 third-party 라이브러리 설치 뿐아니라, 종속성 지옥.. 설치할게 단순히 많은걸 넘어 신경써야할게 한두가지가 아님

삽질 끝에 결국 Flutter로 전환..

---

[ iOS프로젝트에 React Native 통합하기 ]

 

개발환경: 

react-native-cli: 2.0.1

react-native: 15.0.1

cocoapod: 1.16.2

ruby 3.3.6 

 

Node.js 및 npm은 기본 설치되어있다고 가정.

 

1. React Native 프로젝트 생성:
npx react-native init ReactNativeModule
>> 이때 생성된 프로젝트 폴더는 복붙, 나중에 iOS 네이티브 프로젝트와 통합

 

2. RN프로젝트에서 cocoaPods설치
React Native 프로젝트의 ios 디렉토리로 이동
cd ReactNativeModule/ios
pod install

3. 빌드테스트
npx react-native run-ios

 

 

 [iOS 네이티브 프로젝트에 React Native 통합]

1. ReactNativeModule 폴더를 iOS 네이티브 프로젝트의 상위디렉토리로 복사

2. React Native 폴더에서 의존성을 설치
 npm install

 

3. iOS네이티브 프로젝트의 Podfile수정 (React Native 의존성 추가)

platform :ios, '11.0'

use_frameworks! :linkage => :static

target 'YourApp' do
  pod 'React', :path => './ReactNative/node_modules/react-native', :subspecs => [
    'Core',
    'RCTImage',
    'RCTNetwork',
    'RCTText',
    'RCTWebSocket',
  ]

  pod 'yoga', :path => './ReactNative/node_modules/react-native/ReactCommon/yoga'
  pod 'DoubleConversion', :podspec => './ReactNative/node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => './ReactNative/node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => './ReactNative/node_modules/react-native/third-party-podspecs/RCT_Folly.podspec'

end

 

>> 파일경로 체크할것

 

4. iOS 프로젝트 디렉토리에서 pod install

>>>  여기서 문제 발생 - install 실패

>>> 다른 방안
RN프로젝트>iOS폴더 내에 있는 Podfile과 기존iOS프로젝트의 Podfile을 병합

> 이후에 pod install

 

• 병합한 podfile 내용

require_relative './ReactNativeForTest/node_modules/react-native/scripts/react_native_pods'
require_relative './ReactNativeForTest/node_modules/@react-native-community/cli-platform-ios/native_modules'


linkage = ENV['USE_FRAMEWORKS']

if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end



# Specs Sources List
source 'https://github.com/CocoaPods/Specs.git'

# Project Configuration
project 'HanhwaIphone.xcodeproj'
platform :ios, '11.0'


install! 'cocoapods', :deterministic_uuids => false

target 'HanhwaIphone' do
# Comment this line if you're not using Swift and don't want to use dynamic frameworks
#    use_frameworks!

    # Pods for HanhwaIphone
    pod 'AFNetworking', '3.1.0'
    pod 'CocoaHTTPServer', '2.3'
    pod 'CocoaLumberjack', '2.0'
    pod 'CocoaAsyncSocket', '~> 7.4'
    pod 'BlocksKit', '2.2.5'
    pod 'JSONKit-NoWarning', '1.2'
    pod 'UITextView+Placeholder', '1.0'
    pod 'Reachability', '3.2'
    pod 'Masonry'
    pod 'libextobjc'
    pod 'RxDataSources', '5.0.0'


    config = use_native_modules!

    use_react_native!(
      :path => File.expand_path('./ReactNativeForTest/node_modules/react-native', __dir__),
      # An absolute path to your application root.
      :app_path => "#{Pod::Config.instance.installation_root}/.."
    )

end



post_install do |installer|
    puts("Update debug pod settings to speed up build time")
    Dir.glob(File.join("Pods", "**", "Pods*{debug,Private}.xcconfig")).each do |file|
        File.open(file, 'a') { |f| f.puts "\nDEBUG_INFORMATION_FORMAT = dwarf" }

    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false,
      # :ccache_enabled => true
    )

    end
end

 

>> 여기서 계속 설치에 실패!!!!!!!!

 

 

[ iOS 프로젝트에서 React Native 화면 호출 ]

.......... 이후 진행 포기

 

 

 

---

 

 

React Native 통합이 복잡한 이유

1. JavaScript 런타임 통합
   • React Native는 JavaScript로 작성된 코드를 네이티브로 변환하거나 해석
      > 이를 위해 JavaScriptCore 또는 Hermes와 같은 런타임 엔진을 iOS 프로젝트에 추가해야 함
   • Metro 번들러를 통해 JavaScript 코드를 번들링하고, 앱 런타임에서 이를 해석하여 실행
2. CocoaPods 설정
   • React Native의 의존성은 CocoaPods을 통해 관리되며, Podfile에 여러 설정을 추가해야 함 >> 여기서 지옥을 맛본다
   • React Native 의존성 간 버전 충돌..
3. iOS 네이티브 프로젝트와의 충돌
   • 기존 네이티브 프로젝트에 이미 사용 중인 라이브러리(Firebase, RxSwift 등)와 React Native 모듈 간의 설정 충돌이 발생할 수 있음
4. 빌드 환경 문제
   • Node.js, npm, CocoaPods, Xcode 설정 간 호환성이 중요하며, 버전 불일치로 인해 문제가 발생할 수 있습니다.

 

 

---

 

[ iOS프로젝트에 Flutter 통합하기 ]

Flutter가 Dart로 작성된 UI를 자체 렌더링 엔진으로 처리하기 때문에   React Native에 비해 상대적으로 간단한 편

 

공식사이트에 step by step으로 너무 잘 나와있다... 플러터 최고 

https://docs.flutter.dev/add-to-app#add-to-ios-applications

Add Flutter to an existing app

https://docs.flutter.dev/add-to-app/ios/project-setup

Integrate a Flutter module into your iOS project

 

 

• 의존성 충돌이 적음: Flutter는 자체적으로 렌더링 엔진을 포함하므로 네이티브 라이브러리와 충돌할 가능성이 낮다
• 일관된 설정: CocoaPods 설정이 간단하며, Flutter 팀에서 제공하는 podhelper.rb 스크립트로 대부분의 작업이 처리됨