React Native 모듈 개발: 커스텀 네이티브 모듈 만들기

React Native는 JavaScript로 작성된 코드를 통해 네이티브 애플리케이션을 만드는 인기 있는 프레임워크입니다. 기본적으로 React Native는 다양한 기본 기능을 제공하지만, 특정한 필요에 맞춰 추가 기능을 구현해야 하는 경우가 있습니다. 이러한 경우 커스텀 네이티브 모듈을 만들어야 합니다. 이 글에서는 React Native에서 커스텀 네이티브 모듈을 개발하고 사용하는 방법을 단계별로 설명합니다.

커스텀 네이티브 모듈의 필요성

React Native는 다양한 내장 모듈을 제공하지만, 모든 기능을 포함하지는 않습니다. 예를 들어, 특정 하드웨어 장치나 운영 체제의 고유한 기능과 상호작용해야 하는 경우가 있을 수 있습니다. 이때 커스텀 네이티브 모듈을 만들어 JavaScript 코드와 네이티브 코드 간의 상호작용을 가능하게 합니다.

환경 설정

커스텀 네이티브 모듈을 개발하려면 다음과 같은 도구들이 필요합니다:

• Node.js 및 npm (또는 Yarn)
• React Native CLI
• 네이티브 코드를 작성할 수 있는 개발 환경 (Xcode, Android Studio 등)

먼저 React Native 프로젝트를 설정합니다:

sh
npx react-native init MyCustomModuleApp
cd MyCustomModuleApp

프로젝트 폴더로 이동한 후, 새로운 네이티브 모듈을 시작합니다. iOS와 Android 모듈을 각각 설정합니다.

iOS 네이티브 모듈 생성

Step 1: Objective-C 소스 파일 생성

Xcode를 열고 프로젝트 폴더에서 새로운 Objective-C 파일을 생성합니다. 파일 이름을 MyCustomModule.m으로 설정하고, 다음과 같은 간단한 모듈을 작성합니다:

objc
#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(MyCustomModule, NSObject)

RCT_EXTERN_METHOD(exampleMethod:(NSString *)exampleArgument
resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject)

@end

Step 2: 모듈 구현

이제 같은 파일에 모듈의 구현 부분을 추가합니다:

objc
#import "React/RCTLog.h"

@implementation MyCustomModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(exampleMethod:(NSString *)exampleArgument
resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject)
{
  RCTLogInfo(@"Received argument: %@", exampleArgument);
  resolve(@"React Native to iOS bridge successful");
}
@end

Step 3: Bridge 설정

React Native와 iOS 네이티브 코드를 연결하기 위해 Bridge를 설정합니다. AppDelegate.m 파일에서 다음을 추가합니다:

objc
#import <React/RCTBridgeDelegate.h>

그리고 RCTBridgeDelegate를 구현합니다. 이는 JavaScript와 네이티브 코드 간의 통신을 처리하는 부분입니다.

Android 네이티브 모듈 생성

Step 1: Java 파일 생성

Android Studio를 열고 android/app/src/main/java/com/mycustommoduleapp/ 폴더에 새로운 Java 파일을 생성합니다. 파일 이름을 MyCustomModule.java로 설정하고, 다음과 같이 작성합니다:

java
package com.mycustommoduleapp;

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

public class MyCustomModule extends ReactContextBaseJavaModule {

    MyCustomModule(ReactApplicationContext context) {
        super(context);
    }

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

    @ReactMethod
    public void exampleMethod(String exampleArgument, Promise promise) {
        promise.resolve("React Native to Android bridge successful");
    }
}

Step 2: Package 파일 설정

같은 폴더에 MyCustomPackage.java 파일을 생성하고 아래와 같이 설정합니다:

java
package com.mycustommoduleapp;

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 MyCustomPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new MyCustomModule(reactContext));
        return modules;
    }

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

Step 3: MainApplication 파일에 패키지 등록

MainApplication.java 파일을 열고 패키지를 등록합니다:

java
import com.mycustommoduleapp.MyCustomPackage;

@Override
protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    packages.add(new MyCustomPackage());
    return packages;
}

JavaScript 코드에서 모듈 사용

이제 JavaScript 코드 내에서 커스텀 네이티브 모듈을 사용할 수 있습니다. index.js 파일에 다음과 같이 모듈을 불러오고 사용합니다:

javascript
import { NativeModules } from 'react-native';

const { MyCustomModule } = NativeModules;

MyCustomModule.exampleMethod('Test Argument')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

이제 커스텀 모듈을 사용하여 JavaScript 코드와 네이티브 코드가 상호작용할 수 있습니다. 이 글에서는 간단한 예제를 통해 기본적인 개념과 구현 방법을 소개했습니다. 네이티브 기능을 React Native 애플리케이션에서 더 확장하고 커스터마이징 하는 방법을 배우는 좋은 시작점이 될 것입니다.