[iOS 네이티브 앱에 RN화면 접목하기]

** 중요한 고려사항: 통신은 네이티브모듈을 따를수 밖에 없는 상황 (API미제공)에서  네이티브 의존도를 낮추어야 함!!
** And/iOS 모두 접목하려면…. 데이터 주고받는 규격 같은게 단순하고 통일성 있어야함

 

 

- React Native에서 네이티브 코드와 통신하려면, **React Native의 네이티브 모듈(Native Modules)**을 직접 구현하는 방식이 필요
- React Native는 웹뷰 없이 JavaScript와 네이티브 간의 직접 통신을 지원하지 않기 때문에, WKWebView의 스크립트 메시지 기능과 유사하게 사용하려면 네이티브 모듈을 설정해야 함

1. 네이티브 모듈 생성

iOS 네이티브 모듈을 작성하여, React Native에서 호출할 수 있는 함수를 제공합니다. 이 함수는 네이티브 통신 모듈을 호출하고 결과값을 React Native로 전달합니다.

Step 1: 네이티브 모듈 생성 및 설정

1. Objective-C 네이티브 모듈 파일 생성: React Native 프로젝트의 iOS 디렉토리에서 CommunicationModule.h와 CommunicationModule.m 파일을 생성합니다.
2. Objective-C 모듈 작성: CommunicationModule.m에서 네이티브 통신을 구현하고, React Native에서 호출할 수 있도록 설정합니다.

// CommunicationModule.h
#import <React/RCTBridgeModule.h>

@interface CommunicationModule : NSObject <RCTBridgeModule>
@end


// CommunicationModule.m
#import "CommunicationModule.h"
#import "YourNetworkModule.h" // 기존 통신 모듈 import

@implementation CommunicationModule

// React Native에서 사용할 수 있도록 모듈을 내보냅니다.
RCT_EXPORT_MODULE();

// 통신 모듈 호출 함수
RCT_EXPORT_METHOD(callNativeCommunication:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) {
    // 네이티브 통신 모듈 호출
    [YourNetworkModule requestWithCompletion:^(NSDictionary *result, NSError *error) {
        if (error) {
            reject(@"error", @"네트워크 통신 실패", error);
        } else {
            resolve(result); // 성공 시 결과값을 전달
        }
    }];
}

@end

 

위 코드는 callNativeCommunication이라는 메서드를 React Native에 내보냅니다. 통신이 완료되면, 결과를 resolve를 통해 전달하거나 오류 발생 시 reject로 전달합니다.

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

1. NativeModules로 임포트: React Native 쪽에서 네이티브 모듈을 가져와 사용합니다.
2. 버튼 클릭 이벤트로 통신 모듈 호출: 버튼 클릭 시 CommunicationModule의 callNativeCommunication을 호출하고, 결과값을 받아옵니다.

import { NativeModules } from 'react-native';
const { CommunicationModule } = NativeModules;



import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';

export default function MyScreen() {
  const [result, setResult] = useState(null);

  const handleButtonClick = async () => {
    try {
      const response = await CommunicationModule.callNativeCommunication();
      setResult(response); // 결과값을 상태로 설정
    } catch (error) {
      console.error('통신 오류:', error);
    }
  };

  return (
    <View>
      <Button title="통신 모듈 호출" onPress={handleButtonClick} />
      {result && <Text>결과: {JSON.stringify(result)}</Text>}
    </View>
  );
}

 

[요약]

• iOS 네이티브 모듈을 만들어 React Native에서 버튼 클릭 시 통신 모듈을 호출하고, 결과값을 React Native로 전달
• React Native 쪽에서 NativeModules를 통해 네이티브 모듈을 호출하고, 결과값을 받아 화면에 표시