React Native에서 네이티브 모듈 구현하기

React Native에서 네이티브 모듈을 사용하는 방법을 소개합니다. iOS와 Android 네이티브 기능을 React Native와 연결하여 앱의 기능을 확장하는 구체적인 방법을 알아보겠습니다.

 

React Native와 네이티브 모듈 개요

React Native로 모바일 앱을 만들기 시작했을 때, 비교적 간단한 앱은 JavaScript 기술 만으로도 어느 정도 구현이 가능했습니다. 하지만 다양한 프로젝트를 수행하는 동안, 앱 구조와 기획이 복잡한 프로젝트에서는 네이티브 기능을 활용해야 할 상황이 많아졌습니다. 이때 필요했던 것이 바로 네이티브 모듈입니다. 네이티브 모듈은 JavaScript에서 사용할 수 없는 네이티브 기능을 연결해주는 중요한 역할을 합니다.

네이티브 모듈이란?

네이티브 모듈(Native Module)이란 React Native에서 제공하는 기본 JavaScript API로는 사용할 수 없는 네이티브 기능(iOS와 Android의 기능)을 연결하여 사용할 수 있게 해주는 브리지 역할의 기능입니다. 예를 들어, 사용자 기기의 센서 정보나, 특정 네이티브 API는 JavaScript에서 직접 접근할 수 없습니다. 이럴 때 네이티브 모듈을 사용하여 JavaScript 코드에서 네이티브 기능을 호출할 수 있게 됩니다.

왜 네이티브 모듈이 필요한가?

React Native는 대부분의 UI와 앱 로직을 JavaScript로 구현할 수 있지만, 모든 디바이스 기능을 JavaScript로 접근하는 데는 한계가 있습니다. 예를 들어, 배터리 상태 확인, 카메라 제어, 기기의 Bluetooth 기능 등은 네이티브 플랫폼의 고유한 기능이 필요합니다. 제가 처음 카메라 기능을 구현하려 했을 때, React Native에서 기본 제공하는 모듈로는 한계가 있었고, 이때 직접 네이티브 모듈을 만들어 해결했습니다. 이렇게 네이티브 모듈을 사용하면 기존의 JavaScript API로는 불가능한 작업을 가능하게 할 수 있습니다.

 

네이티브 모듈 구현하기

React Native에서 네이티브 모듈을 구현하는 과정은 플랫폼에 따라 다릅니다. 여기서는 iOS와 Android에서 각각 어떻게 네이티브 모듈을 구현하는지 살펴보겠습니다.

iOS에서 네이티브 모듈 구현하기

iOS에서 네이티브 모듈을 구현하기 위해서는 Objective-C나 Swift를 사용할 수 있습니다. 저는 Objective-C와 Swift로 모두 구현한 경험이 있는데요. Objective-C와 Swift로 각각 네이티브 모듈을 만드는 과정을 알아보겠습니다.

Objective-C로 구현하기

• Xcode에서 RNTCustomModule.m 파일을 생성합니다.
• 다음과 같이 네이티브 모듈을 정의합니다.

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(RNTCustomModule, NSObject)

RCT_EXTERN_METHOD(showAlert:(NSString *)message)

@end

• 이 Objective-C 코드는 JavaScript에서 showAlert 메서드를 호출할 수 있도록 연결합니다.
• 이후 JavaScript 파일에서 모듈을 가져와 호출할 수 있습니다.

Swift로 구현하기

• Xcode에서 RNTCustomModule.swift 파일을 생성합니다.
• 다음과 같이 네이티브 모듈을 정의합니다.

import Foundation
import React

@objc(RNTCustomModule)
class RNTCustomModule: NSObject {
	@objc
	func showAlert(_ message: String) {
		DispatchQueue.main.async {
			let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
				alert.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
				UIApplication.shared.keyWindow?.rootViewController?.present(alert, animated: true, completion: nil)
			}
	}
}

• Swift에서는 @objc 속성을 사용하여 React Native에서 접근할 수 있도록 메서드를 노출시킵니다.
• 이후 JavaScript 파일에서 모듈을 가져와 호출할 수 있습니다.

Android에서 네이티브 모듈 구현하기

Android에서 네이티브 모듈을 구현하기 위해서는 Java나 Kotlin을 사용할 수 있습니다. 아래는 간단한 예시입니다.

• Android 프로젝트의 java/com/yourapp 디렉터리에 CustomModule.java 파일을 생성합니다.
• 다음과 같이 네이티브 모듈을 정의합니다.

package com.yourapp;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class CustomModule extends ReactContextBaseJavaModule {

	public CustomModule(ReactApplicationContext reactContext) {
		super(reactContext);
	}
    
	@Override
	public String getName() {
		return "CustomModule";
	}
    
	@ReactMethod
	public void showToast(String message) {
		Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_LONG).show();
	}
}

• 위 코드는 Android의 Toast 메시지를 JavaScript로부터 호출할 수 있도록 정의한 것입니다.

 

JavaScript와 네이티브 모듈 연결하기

네이티브 모듈을 구현한 후, 이를 JavaScript에서 사용할 수 있도록 연결해야 합니다. React Native의 NativeModules를 사용하여 네이티브 모듈을 JavaScript 코드에서 가져올 수 있습니다.

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

CustomModule.showToast('Hello from JavaScript!');

 

위 코드에서는 네이티브에서 구현한 showToast 메서드를 JavaScript에서 호출하고 있습니다.

 

마무리하며

React Native에서 네이티브 모듈을 사용하는 것은 앱의 기능을 확장하는 데 매우 중요한 요소입니다. iOS와 Android에서 각각 네이티브 모듈을 구현하고 JavaScript와 연결함으로써, React Native로 개발하는 앱에서도 디바이스의 고유 기능을 자유롭게 사용할 수 있습니다. 간단한 글이지만 네이티브 기능 활용이 필요한 React Native 프로젝트에 참여하는 분들에게 도움이 되길 바랍니다.