React Native + Kotlin 네이티브 모듈 앱 개발 (Metro 서버 포함 전체 구조 설명)(chatgpt)

🚀 React Native + Kotlin 네이티브 모듈 앱 개발 (Metro 서버 포함 전체 구조 설명)

React Native는 빠른 UI 개발에 최적화된 프레임워크입니다. 하지만 블루투스, 센서, GPS 등 Android 고유 기능을 사용하려면 Kotlin 또는 Java로 네이티브 모듈을 구현해야 합니다. 이 글에서는 React Native + Kotlin 연동 예제를 기준으로, 앱이 어떻게 구성되고, 어떻게 실행되는지, 그리고 Metro 서버의 역할까지 전체 흐름을 정리해봅니다.

---

📁 프로젝트 구조 요약

test_project/
├── App.js
├── /screens
│   ├── HomeScreen.js
│   └── SecondScreen.js
├── /android/app/src/main/java/com/test_project
│   ├── MyNativeModule.kt       ← 네이티브 기능 정의
│   └── MyPackage.kt            ← 패키지 등록
└── /android/app/src/main/java/com/test_project/MainApplication.kt

⚙️ 구성요소 설명 (Metro 포함)

구성 요소	언어	역할
App.js	JS	앱 진입점, 화면 전환 정의
HomeScreen.js	JS	첫 화면, 버튼 클릭으로 화면 전환
SecondScreen.js	JS	Kotlin 네이티브 모듈 호출 및 결과 표시
MyNativeModule.kt	Kotlin	JS에서 호출 가능한 네이티브 함수 정의
MyPackage.kt	Kotlin	Kotlin 모듈을 RN에 등록
MainApplication.kt	Kotlin	앱 초기화 및 패키지 수동 등록
Metro Server	Node.js (CLI)	JS 번들 생성 및 앱에 전송 (개발 시 필수)

---

📄 주요 파일 코드 예시

1. App.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
import SecondScreen from './screens/SecondScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Second" component={SecondScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. HomeScreen.js

import React from 'react';
import { View, Button, StyleSheet } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Button
        title="네이티브 메시지 보기"
        onPress={() => navigation.navigate('Second')}
      />
    </View>
  );
};

export default HomeScreen;

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
});

3. SecondScreen.js

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

const SecondScreen = () => {
  const [message, setMessage] = useState('...');

  useEffect(() => {
    MyNativeModule.getNativeMessage()
      .then(result => setMessage(result))
      .catch(error => setMessage(`Error: ${error.message}`));
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Kotlin에서 온 메시지:</Text>
      <Text style={styles.message}>{message}</Text>
    </View>
  );
};

export default SecondScreen;

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 20, marginBottom: 10 },
  message: { fontSize: 24, color: 'blue' },
});

4. MyNativeModule.kt

package com.test_project

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

class MyNativeModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName(): String {
        return "MyNativeModule"
    }

    @ReactMethod
    fun getNativeMessage(promise: Promise) {
        promise.resolve("안녕하세요! Kotlin에서 왔어요 🎉")
    }
}

5. MyPackage.kt

package com.test_project

import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ViewManager

class MyPackage : ReactPackage {
    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
        return listOf(MyNativeModule(reactContext))
    }

    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
        return emptyList()
    }
}

6. MainApplication.kt

import com.test_project.MyPackage // 상단 import 추가

override fun getPackages(): List<ReactPackage> =
    PackageList(this).packages.apply {
        add(MyPackage()) // 👈 네이티브 패키지 수동 등록
    }

---

⚙️ 빌드 및 실행 과정

1. Metro 서버 실행 - JS 코드 번들 생성 서버
   npx react-native start --reset-cache
2. 앱 빌드 및 설치 - Kotlin 포함 APK 빌드
   npm run android
3. ADB를 통해 APK가 디바이스에 설치 및 실행
4. 앱 실행 → JS Bundle 로딩 (http://10.0.2.2:8081/...)

▶️ 앱 구동 순서 (전체 흐름)

1. 사용자 앱 실행
2. Android → MainApplication.kt → ReactNativeHost 초기화
3. Metro 서버에서 JS 번들 다운로드
4. React Native 런타임 실행 → App.js → HomeScreen
5. 버튼 클릭 → SecondScreen
6. NativeModules.MyNativeModule.getNativeMessage() 호출
7. Kotlin 코드 실행 → 메시지 반환
8. React Native 화면에 메시지 표시

---

📌 정리

• React Native는 UI 및 화면 전환 담당
• Kotlin은 하드웨어 기능, 시스템 접근 담당
• Metro 서버는 개발 시 필수적인 JS 코드 공급 서버
• 둘 사이를 NativeModules로 연결