React Native 0.79에서 C++ Turbo Native 모듈 개발 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

앱 개발

대상자

• React Native 및 C++ 기술에 익숙한 개발자
• 단일 코드베이스로 iOS/Android 공유 로직 구현을 원하는 중급 이상 개발자
• 성능 최적화와 크로스플랫폼 모듈 개발에 관심 있는 개발자

핵심 요약

• C++ Turbo Native 모듈은 TurboModule 인터페이스를 사용하여 Android & iOS 공유 로직 구현 가능
• TypeScript로 작성된 spec 파일(NativeSampleModule.ts)이 모듈 인터페이스를 정의
• Android/iOS별 CMakeLists.txt 및 ModuleProvider 설정을 통해 모듈 등록 및 빌드 자동화
• reverseString 메서드 예시로 C++ 공유 로직 구현 시 std::string(input.rbegin(), input.rend()) 사용

섹션별 세부 요약

1. TypeScript spec 파일 생성

• specs/NativeSampleModule.ts 파일 생성
• TurboModule 인터페이스를 상속한 reverseString 메서드 정의
• 파일명은 Native 접두사로 시작해야 Codegen 처리 가능

2. package.json 설정

• "codegenConfig"으로 jsSrcsDir 경로 및 android.javaPackageName 지정
• NativeSampleModule.ts 파일이 Codegen이 인식할 수 있도록 구조 조정

3. C++ 모듈 구현

• 헤더 파일(NativeSampleModule.h): 모듈 구조 선언
• 소스 파일(NativeSampleModule.cpp): reverseString 메서드 구현
• 공유 로직으로 std::string의 rbegin()/rend() 사용

4. Android 빌드 설정

• android/app/src/main/jni/CMakeLists.txt 생성
• target_sources 및 target_include_directories로 C++ 소스 경로 지정
• OnLoad.cpp에 NativeSampleModule 모듈 등록 로직 추가

5. iOS 설정

• ios 디렉토리에서 pod install 실행
• SampleNativeModuleProvider.mm 파일 생성: Objective-C++으로 TurboModule 생성
• package.json에 ios.modulesProvider 설정으로 모듈 연결

6. JavaScript 테스트

• App.tsx에서 SampleTurboModule.reverseString() 호출
• value 상태 입력 후 reversedValue에 결과 반영

결론

• C++ Turbo Native 모듈은 단일 코드베이스로 iOS/Android 공유 가능하며 성능 향상
• Codegen과 CMakeLists.txt 설정을 통해 자동화된 빌드 프로세스 구현
• 모듈 확장 시 추가 메서드나 외부 C++ 라이브러리 통합 고려
• std::string(input.rbegin(), input.rend())과 같은 C++ 내장 함수 활용하여 코드 간결화