[React Native] Android Native-Module Event Listener 만들기

• 📒 [React Native] Android Native-Module Event Listener 만들기
  • 📌 폴더 및 파일 생성
  • 📌 모듈 파일 생성
    • 🔎 패키지명
    • 🔎 ReactContextBaseJavaModule
    • 🔎 getName 메서드 Override
    • 🔎 ReactApplicationContext와 EventListener
    • 🔎 다른 함수들
  • 📌 패키지 파일 생성
  • 📌 MainApplication에 모듈 등록 설정
  • 📌 React Native에서 네이티브 모듈 사용하기
    • 🔎 NativeModules
    • 🔎 NativeEventEmitter
    • 🔎 결과

📒 [React Native] Android Native-Module Event Listener 만들기

---

Native 모듈을 만드는 것은 간단하지만 여기에 Event Listener가 더해진다면?

찾아보아도 딱히 참고할 만한 예제도 없고, 업무 준비와 공부도 할 겸 제가 A부터 Z까지 만들어보고 기록합니다.

 

📌 폴더 및 파일 생성

안드로이드 네이티브 모듈을 만들기 위해서는 자바 혹은 코틀린 파일을 다음과 같은 경로로 생성해주어야 합니다.

/android/app/src/main/java/패키지명/

 

저는 모듈의 이름을 Event로 지었습니다.

📌 모듈 파일 생성

// EventModule.java

package com.패키지명.event;

import android.os.Handler;
import android.os.Looper;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.modules.core.DeviceEventManagerModule;

public class EventModule extends ReactContextBaseJavaModule {
  ReactApplicationContext reactContext;
  private final Handler handler = new Handler(Looper.getMainLooper());  
  private Runnable runnable;
  private boolean isSending = false;

  EventModule(ReactApplicationContext context) {
    super(context);
    this.reactContext = context;
  }

  @Override
  public String getName() {
    return "EventModule";
  }

  private void sendEvent(String eventName, String eventData) {
    if (reactContext.hasActiveCatalystInstance()) {
        reactContext
            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
            .emit(eventName, eventData);
    }
  }

  public void startSendingEvents() {
    if (isSending) return; // 이미 실행 중이면 중복 방지
    isSending = true;
    runnable = new Runnable() {
        @Override
        public void run() {
            sendEvent("MyCustomEvent", "Hello from Native!");
            handler.postDelayed(this, 1000); // 1초마다 실행
        }
    };
    handler.post(runnable);
  }

  public void stopSendingEvents() {
    if (runnable != null) {
        handler.removeCallbacks(runnable);
        runnable = null;
        isSending = false;
    }
  }

  @ReactMethod
  public void start() {
    startSendingEvents();
  }

  @ReactMethod
  public void stop() {
    stopSendingEvents();
  }
}

그럼 모듈을 만들기 위한 주요 내용들을 하나씩 설명드리겠습니다.

 

🔎 패키지명

package com.패키지명.event;

우선 해당 라인은 해당 클래스가 속한 패키지를 정의하는 선언입니다.

클래스를 논리적으로 그룹화하기 위한 네임스페이스 역할을 하니 해당 프로젝트의 패키지 이름을 넣어주고, 소스 파일의 실제 디렉터리 구조와 일치시켜 줍니다.

🔎 ReactContextBaseJavaModule

ReactContextBaseJavaModule은 React Native에서 Java로 작성된 Native Module을 구현하기 위해 제공되는 기본 클래스입니다. 이 클래스를 상속하면 React Native와 Android 간에 데이터를 주고받거나 JavaScript에서 Native 기능을 호출할 수 있습니다.

import com.facebook.react.bridge.ReactContextBaseJavaModule;

public class EventModule extends ReactContextBaseJavaModule {}

안드로이드 네이티브 모듈을 만들기 위한 핵심 클래스이기에 반드시 extends 해줍니다.

🔎 getName 메서드 Override

public class EventModule extends ReactContextBaseJavaModule {
    @Override
    public String getName() {
      return "EventModule";
    }
}

getName 메소드를 Override 하는 것은 네이티브 모듈의 이름을 정의하는 것입니다.

즉 다음과 같이 여기서 return 하는 문자열로 RN에서 접근이 가능하다는 의미입니다.

 

import { NativeModules } from 'react-native';

const { EventModule } = NativeModules;

 

🔎 ReactApplicationContext와 EventListener

import com.facebook.react.bridge.ReactApplicationContext;

public class EventModule extends ReactContextBaseJavaModule {
  ReactApplicationContext reactContext;

  EventModule(ReactApplicationContext context) {
    super(context);
    reactContext = context;
  }

  private void sendEvent(String eventName, String eventData) {
    if (reactContext.hasActiveCatalystInstance()) {
        reactContext
          .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
          .emit(eventName, eventData);
    }
  }
}

ReactApplicationContext는 Android의 Context를 상속받아, Activity, Service, BroadcastReceiver 등 Android 컴포넌트와 상호작용할 수 있습니다.

그에 더해 JavaScript에 DeviceEventEmitter를 통해 네이티브 이벤트를 전달하는 데 사용할 수 있습니다.

 

네이티브 이벤트를 전달하기 위해 다음과 같은 단계가 필요합니다.

1. context(reactContext) field 선언
2. 생성자로 context 초기화 해주기
3. 이벤트 전송하는 함수 만들기

이벤트 전송 동작을 위한 주요 모듈과 메서드는 다음과 같습니다.

• getJSModule()
  • reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)는 JavaScript 이벤트 모듈인 RCTDeviceEventEmitter에 접근합니다.
  • 이 모듈은 React Native에서 이벤트를 수신하는 데 사용됩니다.
• emit(eventName, eventData)
  • emit 메서드는 이벤트 이름(eventName)과 데이터를 JavaScript로 전달합니다.
  • JavaScript 쪽에서는 EventEmitter를 사용해 이 이벤트를 수신할 수 있습니다.

🔎 다른 함수들

이외의 다른 함수들은 실제 데이터를 수신하는 부분이 없어 테스트 환경을 조성하기 위해 만든 함수들입니다.

 

import com.facebook.react.bridge.ReactMethod;

public class EventModule extends ReactContextBaseJavaModule {
  public void startSendingEvents() {
    if (isSending) return; // 이미 실행 중이면 중복 방지
    isSending = true;
    runnable = new Runnable() {
        @Override
        public void run() {
            sendEvent("MyCustomEvent", "Hello from Native!");
            handler.postDelayed(this, 1000); // 1초마다 실행
        }
    };
    handler.post(runnable);
  }

  public void stopSendingEvents() {
    if (runnable != null) {
        handler.removeCallbacks(runnable);
        runnable = null;
        isSending = false;
    }
  }

  @ReactMethod
  public void start() {
    startSendingEvents();
  }

  @ReactMethod
  public void stop() {
    stopSendingEvents();
  }
}

@ReactMethod 어노테이션을 메서드에 추가해 주면 RN에서 사용가능한 함수가 되고, handler나 runnable은 1초마다 RN에 쏴주기 위해 추가했습니다.

 

📌 패키지 파일 생성

// EventPackage.java

package com.패키지명.event;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class EventPackage implements ReactPackage {
  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
      List<NativeModule> modules = new ArrayList<>();
      modules.add(new EventModule(reactContext));
      return modules;
  }

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
      return Collections.emptyList();
  }
}

그럼 React Native 네이티브 모듈을 만들었으니 패키지 파일을 이용해 Android 프로젝트에 연결해 줍니다.

 

여기는 특별할 게 없으니 간단하게 설명하고 넘어가겠습니다.

 

ReactPackage를 implements 한 뒤 createNativeModules, createViewManagers 메서드를 구현해 주면 됩니다.

modules.add(new EventModule(reactContext));

그리고 여기에는 반드시 내가 만든 모듈을 넣어주도록 합니다.

 

📌 MainApplication에 모듈 등록 설정

// MainApplication.kt

package com.패키지명

import com.패키지명.event.EventPackage
import ...


class MainApplication : Application(), ReactApplication {

  override val reactNativeHost: ReactNativeHost =
      object : DefaultReactNativeHost(this) {
        override fun getPackages(): List<ReactPackage> =
            PackageList(this).packages.apply {
              add(EventPackage())
            }
        // ...
      }
  // ...
}

방금 만든 패키지 파일을 경로에 맞춰 import 해줍니다.

그다음 getPackages 메서드 안에 add 해주면 정말 끝입니다.

 

저는 최신 버전으로 프로젝트를 생성하여 코틀린이지만, 자바 파일이어도 주석으로 예제가 친절하게 나와있기 때문에 똑같이 따라 하기만 하면 됩니다.

 

📌 React Native에서 네이티브 모듈 사용하기

// App.tsx

import React from 'react';
import {NativeEventEmitter, NativeModules, View} from 'react-native';

const {EventModule} = NativeModules;
const eventEmitter = new NativeEventEmitter(EventModule);
EventModule?.start();
eventEmitter.addListener('MyCustomEvent', data => console.log(data));

function App(): React.JSX.Element {
  return <View></View>;
}

export default App;

간단하게 실행 테스트만 해보기 위해 App.tsx에서 전역으로 불러왔습니다.

네이티브 모듈을 사용하기 위한 주요 구성요소는 다음과 같습니다.

🔎 NativeModules

const {EventModule} = NativeModules;

NativeModules는 React Native의 네이티브 모듈에 접근할 수 있도록 제공되는 객체입니다.

네이티브 모듈의 getNames에서 return 해준 문자열로 접근하면 됩니다.

🔎 NativeEventEmitter

const eventEmitter = new NativeEventEmitter(EventModule);

 

NativeEventEmitter는 네이티브 모듈에서 발생하는 이벤트를 감지하고, 이를 React Native에서 사용할 수 있도록 해주는 클래스입니다.

EventModule에서 발생하는 이벤트를 수신하도록 설정합니다.

🔎 결과

EventModule?.start();
eventEmitter.addListener('MyCustomEvent', data => console.log(data));

@ReactMethod로 이벤트 시작을 트리거해주었던 start 함수를 불러온 뒤 이벤트 리스너로 수신한 데이터를 콘솔로 찍어본 결과 아주 잘 작동합니다.

 

전체 환경을 포함한 예제는 제 깃허브에 올려두었으니 필요하시다면 참고 바랍니다.

https://github.com/devlasbe/rn_android_native_module_event_listener

GitHub - devlasbe/rn_android_native_module_event_listener: React Native의 Android Native Module로 Event Listener를 만드는