'react-native'에 해당되는 글 1건

1. 개요

Expo의 Managed Workflow는 Expo가 프로젝트의 네이티브 코드(iOS 및 Android)를 관리해 주는 방식이다. 개발자는 네이티브 코드(ios/, android/ 폴더)를 직접 수정하지 않고, JavaScript 및 TypeScript 코드만 작성하여 앱을 개발할 수 있다.

2. Managed Workflow의 주요 특징

• 네이티브 코드 접근 불가
  • ios/, android/ 폴더가 존재하지 않으며, 네이티브 프로젝트 설정을 직접 수정할 수 없음
• Expo의 자동 업데이트 및 관리
  • Expo SDK가 자동으로 업데이트되고, Expo가 네이티브 설정을 관리함
• OTA(Over-The-Air) 업데이트 지원
  • 코드 수정 후 새 빌드를 하지 않고도 expo publish로 앱을 업데이트 가능
• EAS(Build, Update, Submit) 지원
  • eas build를 통해 클라우드에서 빌드 및 배포 가능
• 제한된 네이티브 모듈 사용
  • Expo에서 지원하는 네이티브 모듈만 사용 가능하며, 지원되지 않는 모듈을 추가하려면 Bare Workflow로 전환해야 함

3. Managed Workflow 사용 방법

1) 프로젝트 생성

npx create-expo-app my-app
cd my-app

또는,

npx expo init my-app --template

2) 개발 서버 실행

npx expo start

3) 네이티브 설정 변경 (app.json 또는 app.config.js)

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSLocationWhenInUseUsageDescription": "앱이 사용자 위치를 사용할 수 있도록 허용해주세요."
      }
    },
    "android": {
      "permissions": ["ACCESS_FINE_LOCATION"]
    }
  }
}

4) Expo SDK 사용 예제 (expo-location 활용)

설치 명령어:

npx expo install expo-location

import * as Location from 'expo-location';
import { useState, useEffect } from 'react';
import { Text, View } from 'react-native';

export default function App() {
  const [location, setLocation] = useState<Location.LocationObject | null>(null);
  const [errorMsg, setErrorMsg] = useState('');

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('위치 접근 권한이 필요합니다.');
        return;
      }
      let currentLocation = await Location.getCurrentPositionAsync({});
      setLocation(currentLocation);
    })();
  }, []);

  return (
    <View>
      <Text>{errorMsg || JSON.stringify(location)}</Text>
    </View>
  );
}

4. Managed Workflow의 빌드 및 배포

1) 개발용 빌드 실행

npx expo start

Expo Go를 이용하여 테스트 가능

(2) EAS 빌드

npx eas build -p ios  # iOS 빌드
npx eas build -p android  # Android 빌드

(3) EAS Submit (앱 스토어 제출)

npx eas submit -p ios
npx eas submit -p android

(4) OTA(Over-The-Air) 업데이트

npx expo publish

5. Managed Workflow의 한계

1) 네이티브 코드 수정 불가

ios/, android/ 폴더를 직접 수정할 수 없으며, 특정 네이티브 모듈을 추가하려면 Bare Workflow로 전환해야 한다.

npx expo prebuild

(2) 일부 네이티브 라이브러리 미지원

Expo가 지원하지 않는 네이티브 모듈을 사용하려면 Bare Workflow가 필요하다.

3) 앱 크기 증가

Expo SDK가 포함되어 있어 앱 크기가 증가할 수 있다.

6. Managed Workflow vs. Bare Workflow 비교

7. 결론

Expo의 Managed Workflow는 빠르고 간편하게 React Native 앱을 개발할 수 있도록 도와주는 강력한 개발 방식이다.

✅ 추천 사용 시나리오

• 빠른 MVP 개발
• OTA 업데이트가 중요한 프로젝트
• 네이티브 코드 변경 없이 개발이 필요한 경우

⚠️ Bare Workflow로 전환이 필요한 경우

• Expo에서 지원하지 않는 네이티브 모듈 사용
• ios/, android/ 폴더 직접 수정이 필요한 경우