내가 편하게 사용하던 View

브릿징은 무엇이고, 어떻게 동작할까?

• Fabric: UI 렌더링을 최적화한 새로운 레이아웃 엔진. 브릿지를 거치지 않고 JSI를 통해 네이티브와 직접 소통.

• TurboModules: 기존 Native Modules의 개선 버전. 필요할 때만 로드(Lazy Loading)되어 메모리 최적화 및 성능 향상.

• JSI: 기존 Bridge 대신 JavaScript와 네이티브 코드가 직접 소통할 수 있도록 설계된 인터페이스.

{
  "codegenConfig": {
    ...
  }
}

Codegen이 필요한 이유?

• 타입 불일치 문제 (JavaScript와 네이티브 코드 간의 데이터 타입이 다를 수 있음)

• 반복적인 네이티브 모듈 작성 부담

• 비효율적인 네이티브 연동 코드

Codegen과 C++의 관계

Codegen으로 생성되는 Interface 종류

(1) Native Modules (TurboModules)

• 기존 React Native의 Native Modules을 대체하는 개념

• @react-native/codegen을 사용해 TypeScript로 네이티브 모듈을 정의하면,
• iOS(Objective-C++/Swift) / Android(Java/Kotlin)용 C++ 바인딩 코드가 자동 생성됨

• 네이티브 모듈이 JSI를 통해 직접 JavaScript와 연결됨

export interface MyModule extends TurboModule {
  getDeviceName(): Promise<string>;
}

(2) Native UI Components (Fabric)

• 기존 <View />, <Text /> 등의 네이티브 UI 컴포넌트를 대체

• @react-native/codegen을 사용하여 TypeScript에서 UI 컴포넌트를 선언하면,
• C++을 통해 iOS(Android) 네이티브 뷰와 직접 연결됨

• React Native의 Fabric Renderer가 C++ 인터페이스를 통해 해당 UI를 네이티브에서 렌더링

export interface MyButtonProps {
  title: string;
  onPress: () => void;
}

export const MyButton = codegenNativeComponent<MyButtonProps>('MyButton');

📌 Android에서 JNI와 C++의 관계

1. JNI(Java Native Interface)란?

2. JNI와 C++의 관계

• C++을 사용하면 메모리 관리, 성능 최적화, 멀티스레딩 등의 기능을 더 쉽게 활용 가능

• JNI를 사용해 Java/Kotlin 코드와 C++ 코드 간 데이터 교환 및 함수 호출이 가능

3. React Native New Architecture에서 JNI의 역할

4. Android에서 C++과 JNI를 활용한 네이티브 모듈 예제

(1) Java/Kotlin에서 C++ 네이티브 코드 호출 (JNI 활용)

#include <jni.h>

extern "C"
JNIEXPORT jstring JNICALL
Java_com_example_MyModule_getMessage(JNIEnv *env, jobject instance) {
    return env->NewStringUTF("Hello from C++!");
}

(2) React Native에서 TurboModules와 JNI 활용

#include <jni.h>
#include <react/jni/ReactBridge.h>

extern "C"
JNIEXPORT void JNICALL
Java_com_example_MyModule_nativeFunction(JNIEnv *env, jobject instance) {
    // TurboModule을 통해 JavaScript에서 C++ 함수를 직접 호출 가능
}

public class MyModule extends ReactContextBaseJavaModule {
    static {
        System.loadLibrary("mylibrary");
    }

    private native void nativeFunction(); // C++ 네이티브 함수와 연결

    @ReactMethod
    public void callNativeFunction() {
        nativeFunction();
    }
}

📌 왜 iOS에서는 JNI가 필요하지 않을까?

• Android는 Java/Kotlin이 기본 언어이므로 C++과의 연결을 위해 JNI(Java Native Interface)를 사용해야 합니다.

• iOS는 Objective-C 또는 Swift가 기본 언어이므로, C++과의 연결을 위해 Objective-C++을 사용하면 됩니다.

• Objective-C++ (.mm 확장자) 은 Objective-C와 C++ 코드를 혼합하여 사용할 수 있는 확장 문법을 제공합니다.

📌 iOS에서 C++과 연동하는 방식 (Objective-C++)

1. .mm (Objective-C++) 확장자 사용

• iOS에서 C++을 사용하려면, Objective-C 파일의 확장자를 .m에서 .mm으로 변경해야 합니다.

• .mm 파일에서는 Objective-C와 C++ 코드를 동시에 사용할 수 있습니다.

// MyNativeModule.cpp
#include "MyNativeModule.h"

std::string MyNativeModule::getMessage() {
    return "Hello from C++!";
}

// MyNativeModule.mm
#import "MyNativeModule.h"

@implementation MyNativeModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(getMessage:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) {
    std::string message = MyNativeModule::getMessage();
    NSString *nsMessage = [NSString stringWithUTF8String:message.c_str()];
    resolve(nsMessage);
}

@end

No FreeLunch