[ React Native] TurboModule 적용하기 (react-native 0.79.2 version)

좋은 기회로 현재 프로젝트를 처음부터 끝까지 새로 리팩토링 하는 기회를 얻게되었다.

 

0.79.2 버전으로 새로 버전업을해서 개발중인데, TurboModule 을 사용해보기로 했다.

 

TurboModle 은 기존 bridge 구조를 사용하지않아 좀더 좋은 퍼포먼스를 보여준다

 

일단 

 

폴더트리는

android/app 에서

 

이렇게 구성했고

 

NativeLocalStorageModule.java 는

package com.공통폴더이름.nativelocalstorage;

import android.content.Context;
import android.content.SharedPreferences;
import com.공통폴더이름.NativeLocalStorageSpec;
import com.facebook.react.bridge.ReactApplicationContext;

public class NativeLocalStorageModule extends NativeLocalStorageSpec {

  public static final String NAME = "NativeLocalStorage";

  public NativeLocalStorageModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return NAME;
  }

  @Override
  public void setItem(String value, String key) {
    SharedPreferences sharedPref = getReactApplicationContext().getSharedPreferences("my_prefs", Context.MODE_PRIVATE);
    SharedPreferences.Editor editor = sharedPref.edit();
    editor.putString(key, value);
    editor.apply();
  }

  @Override
  public String getItem(String key) {
    SharedPreferences sharedPref = getReactApplicationContext().getSharedPreferences("my_prefs", Context.MODE_PRIVATE);
    String username = sharedPref.getString(key, null);
    return username;
  }

  @Override
  public void removeItem(String key) {
    SharedPreferences sharedPref = getReactApplicationContext().getSharedPreferences("my_prefs", Context.MODE_PRIVATE);
    sharedPref.edit().remove(key).apply();
  }

  @Override
  public void clear() {
    SharedPreferences sharedPref = getReactApplicationContext().getSharedPreferences("my_prefs", Context.MODE_PRIVATE);
    sharedPref.edit().clear().apply();
  }
}

NativeLocalStoragePackage.java

 

package com.공통폴더이름.nativelocalstorage;

import com.facebook.react.BaseReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.module.model.ReactModuleInfo;
import com.facebook.react.module.model.ReactModuleInfoProvider;

import java.util.HashMap;
import java.util.Map;

public class NativeLocalStoragePackage extends BaseReactPackage {

  @Override
  public NativeModule getModule(String name, ReactApplicationContext reactContext) {
    if (name.equals(NativeLocalStorageModule.NAME)) {
      return new NativeLocalStorageModule(reactContext);
    } else {
      return null;
    }
  }

  @Override
  public ReactModuleInfoProvider getReactModuleInfoProvider() {
    return new ReactModuleInfoProvider() {
      @Override
      public Map<String, ReactModuleInfo> getReactModuleInfos() {
        Map<String, ReactModuleInfo> map = new HashMap<>();
        map.put(NativeLocalStorageModule.NAME, new ReactModuleInfo(
          NativeLocalStorageModule.NAME,       // name
          NativeLocalStorageModule.NAME,       // className
          false, // canOverrideExistingModule
          false, // needsEagerInit
          false, // isCXXModule
          true   // isTurboModule
        ));
        return map;
      }
    };
  }
}

 

 

이렇게 구성했다.

 

또한 codegen 을 사용하기 위해서는 root/specs 에

NativeLocalStorage.ts 가

 

import type {TurboModule} from 'react-native';
import {TurboModuleRegistry} from 'react-native';

export interface Spec extends TurboModule {
  setItem(value: string, key: string): void;
  getItem(key: string): string | null;
  removeItem(key: string): void;
  clear(): void;
}

export default TurboModuleRegistry.getEnforcing<Spec>(
  'NativeLocalStorage',
);

 

이렇게 들어가야있어야한다.

 

마지막으로, package.json 에

 

 "codegenConfig": {
    "name": "MyTurboModules",
    "type": "modules",
    "jsSrcsDir": "specs",
    "android": {
      "javaPackageName": "com.공통폴더이름"
    }
  },

 

이렇게 세팅하면된다.

 

"codegen": "cd android && ./gradlew :app:generateCodegenArtifactsFromSchema && cd .."

 

해당 명령어로, 먼저 codegen 을통해, 

 

app/build/generated/codegen 폴더에 NativeSystemModuleSpec 를 생성해주고 해당 파일을

import com.공통폴더이름.NativeSystemModuleSpec;

 

public class NativeSystemModule extends NativeSystemModuleSpec {

 

이렇게 사용하는 원리다.

 

추가

 

주의사항

 

1. specs/ 안에 있는 파일명이 Native 로 시작해야한다.

파일명을 Native 로 시작하지않으면, codegen 생성시에 읽지못함

 

2.

export default TurboModuleRegistry.getEnforcing<Spec>('NativeAwsMqttModule');

 

해당 NativeAwsMqttModule 이 

 

public static final String NAME = "NativeAwsMqttModule";

 

와 일치해야한다.