Expo 완벽 가이드 | React Native 개발·EAS·Managed Workflow·실전 활용

2026년 4월 7일 · 14분 읽기 · 수정 2026년 4월 7일 중급

이 글의 핵심

Expo로 React Native 앱을 빠르게 개발하는 완벽 가이드입니다. Managed Workflow, EAS Build, OTA Updates, 배포까지 실전 예제로 정리했습니다.

실무 경험 공유: Expo를 사용하면서, Native 설정 없이 즉시 개발을 시작하고 OTA 업데이트로 빠른 배포가 가능했던 경험을 공유합니다.

들어가며: “React Native 설정이 복잡해요”

실무 문제 시나리오

시나리오 1: Xcode, Android Studio 설정이 어려워요
Native 환경 설정이 복잡합니다. Expo는 설정이 필요 없습니다.

시나리오 2: 빌드가 어려워요
로컬에서 빌드하기 복잡합니다. EAS Build가 클라우드에서 빌드합니다.

시나리오 3: 업데이트가 느려요
앱스토어 심사를 기다려야 합니다. Expo OTA는 즉시 업데이트합니다.

1. Expo란?

핵심 특징

Expo는 React Native 개발 플랫폼입니다.

주요 장점:

Managed Workflow: Native 설정 불필요
EAS Build: 클라우드 빌드
OTA Updates: 즉시 업데이트
Expo Go: 실기기 테스트
풍부한 API: 카메라, 위치, 알림

2. 프로젝트 생성

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

실행

iOS: Expo Go 앱에서 QR 코드 스캔
Android: Expo Go 앱에서 QR 코드 스캔
Web: w 키 입력

3. 기본 컴포넌트

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello Expo!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

4. Expo Router

npx create-expo-app my-app --template tabs

파일 기반 라우팅

app/
├── (tabs)/
│   ├── index.tsx      # /
│   └── profile.tsx    # /profile
├── users/
│   └── [id].tsx       # /users/:id
└── _layout.tsx

app/index.tsx

import { View, Text } from 'react-native';
import { Link } from 'expo-router';

export default function Home() {
  return (
    <View>
      <Text>Home Screen</Text>
      <Link href="/profile">Go to Profile</Link>
      <Link href="/users/1">Go to User 1</Link>
    </View>
  );
}

5. Expo SDK

Camera

npx expo install expo-camera

import { CameraView, useCameraPermissions } from 'expo-camera';
import { useState } from 'react';
import { Button, View } from 'react-native';

export default function CameraScreen() {
  const [permission, requestPermission] = useCameraPermissions();
  const [facing, setFacing] = useState<'front' | 'back'>('back');

  if (!permission) {
    return <View />;
  }

  if (!permission.granted) {
    return (
      <View>
        <Button onPress={requestPermission} title="Grant Permission" />
      </View>
    );
  }

  return (
    <CameraView style={{ flex: 1 }} facing={facing}>
      <Button onPress={() => setFacing(facing === 'back' ? 'front' : 'back')} title="Flip" />
    </CameraView>
  );
}

Location

npx expo install expo-location

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

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

  useEffect(() => {
    (async () => {
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') return;

      const location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();
  }, []);

  return (
    <View>
      <Text>Latitude: {location?.coords.latitude}</Text>
      <Text>Longitude: {location?.coords.longitude}</Text>
    </View>
  );
}

6. EAS Build

설치

npm install -g eas-cli
eas login
eas build:configure

eas.json

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  }
}

빌드

# iOS
eas build --platform ios

# Android
eas build --platform android

# 둘 다
eas build --platform all

7. OTA Updates

설치

npx expo install expo-updates

배포

eas update --branch production --message "Fix login bug"

8. 환경 변수

.env

API_URL=https://api.example.com

app.config.ts

export default {
  expo: {
    name: 'My App',
    slug: 'my-app',
    extra: {
      apiUrl: process.env.API_URL,
    },
  },
};

사용

import Constants from 'expo-constants';

const apiUrl = Constants.expoConfig?.extra?.apiUrl;

정리 및 체크리스트

핵심 요약

Expo: React Native 개발 플랫폼
Managed Workflow: Native 설정 불필요
EAS Build: 클라우드 빌드
OTA Updates: 즉시 업데이트
Expo Go: 실기기 테스트
풍부한 API: 카메라, 위치, 알림

구현 체크리스트

같이 보면 좋은 글

React Native 완벽 가이드
React 완벽 가이드
TypeScript 완벽 가이드

이 글에서 다루는 키워드

Expo, React Native, Mobile, EAS, iOS, Android, TypeScript

자주 묻는 질문 (FAQ)

Q. Bare React Native와 비교하면 어떤가요?

A. Expo가 훨씬 간단하고 빠릅니다. Bare는 더 많은 제어를 제공합니다.

Q. Native 모듈을 사용할 수 있나요?

A. 네, Expo Config Plugins나 Bare Workflow로 가능합니다.

Q. 무료인가요?

A. 기본 기능은 무료입니다. EAS Build는 유료 플랜이 있습니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, 많은 기업에서 안정적으로 사용하고 있습니다.