Expo Router v4 + EAS Build 세팅 — 맥 없이 iOS 앱 빌드하기

React Native로 앱을 만들 때 가장 진입 장벽이 높은 부분이 빌드 환경이다. Xcode 설정, Android Studio, 인증서 관리까지 신경 쓸 게 많다. EAS Build는 이 빌드 과정을 클라우드에서 처리해줘서, 맥이 없어도 iOS 앱 빌드가 가능하다.

왜 Expo Router인가

기존 React Navigation은 설정이 많다. 스택, 탭, 드로어 네비게이터를 따로 설정하고 타입 정의도 손으로 써야 한다.

Expo Router는 Next.js처럼 파일 기반 라우팅을 쓴다. app/ 디렉토리 구조가 그대로 라우트가 된다.

app/
├── _layout.tsx       # 루트 레이아웃
├── index.tsx         # /
├── profile.tsx       # /profile
└── (tabs)/
    ├── _layout.tsx   # 탭 레이아웃
    ├── home.tsx      # 홈 탭
    └── settings.tsx  # 설정 탭

웹 개발 경험이 있으면 구조가 바로 이해된다.

프로젝트 생성

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

tabs 템플릿으로 시작하면 탭 네비게이션 기본 구조가 잡혀 있다. 파일 보면서 구조 파악하기 좋다.

화면 이동

import { router } from "expo-router";

router.push("/profile");
router.back();
router.push({ pathname: "/posts/[id]", params: { id: "123" } });

Link 컴포넌트도 쓸 수 있다. 웹에서는 <a> 태그로 렌더링된다.

import { Link } from "expo-router";

<Link href="/profile">프로필 보기</Link>

EAS Build 설정

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

실행하면 eas.json이 생긴다. 빌드 프로필을 설정하는 파일이다.

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

개발용 빌드는 developmentClient: true로 설정하면 Expo Go 대신 커스텀 개발 클라이언트를 쓴다. 네이티브 모듈을 직접 추가했을 때 필요하다. 빌드 실행은 이렇게 한다.

eas build --platform ios --profile development

클라우드에서 빌드되고 완료되면 QR 코드나 링크로 설치할 수 있다. Apple Developer 계정이 있으면 인증서도 EAS가 알아서 관리해준다.

환경변수 관리

Expo에서 환경변수는 EXPO_PUBLIC_ 접두사가 있어야 앱 코드에서 접근할 수 있다.

# .env
EXPO_PUBLIC_API_URL=https://api.example.com

const apiUrl = process.env.EXPO_PUBLIC_API_URL;

서버 전용 시크릿은 EAS에서 관리한다.

eas secret:create --name API_SECRET_KEY --value "my-secret"

EAS 빌드 시 주입되고 앱 번들에는 포함되지 않는다.

플랫폼별 분기

iOS, Android, Web 각각 다른 UI가 필요할 때는 Platform.OS로 처리한다.

import { Platform } from "react-native";

const paddingHorizontal = Platform.select({
  ios: 16,
  android: 12,
  web: 24,
});

플랫폼별 파일 확장자를 쓸 수도 있다. Button.ios.tsx, Button.android.tsx처럼 두면 각 플랫폼에서 자동으로 맞는 파일을 선택한다.

Expo Router와 EAS 조합으로 앱 개발 환경 초기 세팅이 이전보다 훨씬 빨라졌다. 네이티브 빌드 환경을 로컬에 안 잡아도 된다는 게 특히 유용하다. 웹 개발자가 React Native를 처음 시작할 때 진입장벽이 크게 낮아진 이유가 여기 있다.