React Native 블루투스 통합: 장치 연결 및 데이터 전송

React Native는 크로스 플랫폼 모바일 앱 개발을 위한 인기 있는 프레임워크입니다. 이 글에서는 Bluetooth 통합을 통해 React Native 애플리케이션에서 장치와 연결하고 데이터를 주고받는 방법을 소개합니다. 주로 'react-native-ble-plx' 라이브러리를 사용하여 블루투스 기능을 구현할 것입니다. 시작하기 전에 필요한 도구와 설정을 확인하세요.

필요한 도구 및 설정

블루투스 기능을 구현하기 위해 다음과 같은 도구가 필요합니다:

• Node.js 및 npm: 최신 버전 설치
• React Native CLI: npm install -g react-native-cli
• Xcode (iOS 개발용)
• Android Studio (Android 개발용)
• 물리적 블루투스 장치 (테스트용)

'package.json' 파일에 'react-native-ble-plx' 라이브러리를 추가합니다.

json
"dependencies": {
  "react-native-ble-plx": "^2.0.0"
}

그리고 라이브러리를 설치합니다.

bash
npm install react-native-ble-plx
react-native link react-native-ble-plx

iOS의 경우 Podfile을 업데이트 한 후 pod install 명령을 실행합니다.

ruby
pod 'react-native-ble-plx', :path => '../node_modules/react-native-ble-plx'

블루투스 관리자 초기화 및 장치 스캔

블루투스 관리자를 초기화하고 장치 목록을 스캔하여 찾는 절차는 다음과 같습니다.

javascript
import { BleManager } from 'react-native-ble-plx';
import { Platform, PermissionsAndroid } from 'react-native';

const manager = new BleManager();

async function scanForDevices() {
  if (Platform.OS === 'android' && Platform.Version >= 23) {
    const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION);
    if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
      return;
    }
  }

  manager.startDeviceScan(null, null, (error, device) => {
    if (error) {
      console.error(error);
      return;
    }

    if (device) {
      console.log(`디바이스 발견: ${device.name} (${device.id})`);
    }
  });
}

scanForDevices();

장치 스캔을 종료하려면 manager.stopDeviceScan() 메소드를 사용합니다.

장치 연결 및 서비스 탐색

발견된 장치와 연결하고 해당 장치의 서비스를 탐색하려면 다음과 같습니다.

javascript
async function connectToDevice(deviceId) {
  try {
    const device = await manager.connectToDevice(deviceId);
    console.log('장치에 연결되었습니다:', device.id);
    const services = await device.discoverAllServicesAndCharacteristics();
    return services;
  } catch (error) {
    console.error(`장치 연결 실패: ${error.message}`);
  }
}

데이터 전송 및 수신

블루투스를 통해 데이터를 주고받기 위해 서비스와 특성을 설정합니다. 여기서는 기본적인 데이터 읽기 및 쓰기 작업을 다룹니다.

javascript
async function readData(deviceId, serviceUUID, characteristicUUID) {
  try {
    const characteristic = await manager.readCharacteristicForDevice(deviceId, serviceUUID, characteristicUUID);
    const data = Buffer.from(characteristic.value, 'base64').toString('utf-8');
    console.log('수신된 데이터:', data);
  } catch (error) {
    console.error(`데이터 읽기 실패: ${error.message}`);
  }
}

async function writeData(deviceId, serviceUUID, characteristicUUID, message) {
  try {
    const base64Message = Buffer.from(message, 'utf-8').toString('base64');
    await manager.writeCharacteristicWithResponseForDevice(deviceId, serviceUUID, characteristicUUID, base64Message);
    console.log('데이터 전송 성공');
  } catch (error) {
    console.error(`데이터 전송 실패: ${error.message}`);
  }
}

서비스 UUID와 특성 UUID는 블루투스 장치의 스펙에 따라 다르므로 장치의 문서를 참조하시기 바랍니다.

에러 핸들링 및 디버깅

블루투스 통합 작업 시 다양한 에러가 발생할 수 있습니다. 이러한 에러를 핸들링하고 디버깅하는 방법을 알아봅니다.

javascript
manager.onDeviceDisconnected(deviceId, (error, device) => {
  if (error) {
    console.error(`장치 연결 끊김 에러: ${error.message}`);
  } else {
    console.log(`장치 연결 끊김: ${device.id}`);
  }
});

최대한 모든 가능성을 고려하여 에러를 처리하고, 디버깅 로그를 남기는 것이 좋습니다.

결론

이제 React Native를 사용하여 블루투스를 설정하고, 장치에 연결하며 데이터를 주고받는 방법을 이해하셨을 것입니다. 이 가이드를 통해 효과적으로 블루투스 기능을 통합하여 더 나은 사용자 경험을 제공할 수 있을 것입니다. 추가적으로 더욱 복잡한 블루투스 통신이 필요하다면, 'react-native-ble-plx' 라이브러리의 문서를 참고하거나, 공식 블루투스 스펙 문서를 참조해주세요.