📷 70. React Native 카메라 및 이미지 업로드 기능 구현 전략 — react-native-image-picker, expo-image-picker, S3 업로드까지

---

모바일 앱에서 이미지를 찍거나 선택해서 업로드하는 기능은
SNS, 쇼핑, 헬스케어 등 거의 모든 서비스에서 등장한다.

이번 글에서는

• 어떤 라이브러리를 써야 하는지
• 어떤 옵션들을 설정해야 하는지
• 업로드까지 어떻게 연결하는지
  React Native에서 이미지 업로드 기능 전체 흐름을 정리했다.

---

✅ 1. 라이브러리 선택 기준

라이브러리	특징	추천 상황
react-native-image-picker	카메라 + 갤러리 지원, 네이티브 기반	Bare Workflow
expo-image-picker	Expo 프로젝트 전용, 사용 편함	Expo 기반 앱
expo-camera	직접 카메라 UI 구현 가능	커스텀 UI 필요할 때

---

📦 2. react-native-image-picker 기본 사용법

설치

npm install react-native-image-picker
npx pod-install

권한 설정 (Android)

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

이미지 선택 예시

import { launchImageLibrary } from 'react-native-image-picker';

const pickImage = () => {
  launchImageLibrary(
    {
      mediaType: 'photo',
      quality: 0.8,
    },
    (response) => {
      if (response.didCancel) return;
      if (response.assets) {
        console.log(response.assets[0].uri); // 이미지 경로
      }
    }
  );
};

✅ 갤러리에서 이미지 선택
✅ response.assets[0].uri를 통해 이미지 접근

---

📸 3. 카메라로 촬영해서 업로드

import { launchCamera } from 'react-native-image-picker';

const takePhoto = () => {
  launchCamera(
    {
      mediaType: 'photo',
      saveToPhotos: true,
    },
    (response) => {
      if (response.assets) {
        const uri = response.assets[0].uri;
        uploadImageToServer(uri);
      }
    }
  );
};

• saveToPhotos: true 옵션으로 촬영 후 저장도 가능

---

☁️ 4. 이미지 업로드 예시 (S3 or 서버)

const uploadImageToServer = async (uri: string) => {
  const formData = new FormData();
  formData.append('file', {
    uri,
    type: 'image/jpeg',
    name: 'photo.jpg',
  });

  await fetch('https://your-api.com/upload', {
    method: 'POST',
    headers: {
      'Content-Type': 'multipart/form-data',
    },
    body: formData,
  });
};

✅ 서버로 multipart/form-data 전송
✅ 실제 백엔드 구현에 따라 파일명, 토큰 필요할 수 있음

---

🔐 5. 권한 처리 팁 (Android & iOS)

• Android 13 이상: READ_MEDIA_IMAGES 권한 필요
• iOS: Info.plist에 설명 추가

<key>NSCameraUsageDescription</key>
<string>프로필 사진 촬영을 위해 카메라 접근이 필요합니다.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>사진 업로드를 위해 사진 접근이 필요합니다.</string>

---

🧠 실전 경험

처음엔 Expo 기반으로 빠르게 expo-image-picker를 썼지만,
카메라 UI 커스터마이징이 필요해지면서
react-native-image-picker로 마이그레이션했다.

이미지 업로드는 FormData 기반으로 처리했고,
사용자 경험을 위해 이미지 리사이징 → 업로드 순서로 처리해서
성능과 UX 모두 챙길 수 있었다.

---

📷 “사진 한 장에도 UX와 성능이 숨어있다.”

---