React Native Expo로 간편하게 앱 개발하기: 시작 가이드

작성일 : 2024-07-24

React Native Expo로 간편하게 앱 개발하기: 시작 가이드

React Native는 Facebook에서 개발한 오픈 소스 프레임워크로, JavaScript와 React를 사용하여 네이티브 모바일 애플리케이션을 개발할 수 있게 해줍니다. 하지만 개발 환경을 설정하고 빌드하는 과정은 복잡할 수 있습니다. Expo는 이런 복잡한 과정을 간소화해주는 도구로, 초보자도 손쉽게 React Native 앱을 개발할 수 있게 해줍니다. 이 가이드에서는 Expo를 사용하여 React Native 앱을 시작하는 방법에 대해 설명합니다.

Expo 설치 및 초기 설정

1. Node.js 설치

먼저, React Native와 Expo를 사용하려면 Node.js가 필요합니다. Node.js는 JavaScript 런타임 환경으로, 다양한 JavaScript 도구를 실행하는 데 필수적입니다.

🔗 Node.js 공식 웹사이트에 접속합니다.
운영체제에 맞는 LTS(Long Term Support) 버전을 다운로드하여 설치합니다.
설치가 완료되면 터미널이나 커맨드 프롬프트를 열고 Node.js와 npm(Node Package Manager)이 잘 설치됐는지 확인합니다.
```
bash
node -v
npm -v
```

2. Expo CLI 설치

Expo CLI는 Expo를 통해 React Native 프로젝트를 생성하고 관리하는 도구입니다. npm을 통해 간단하게 설치할 수 있습니다.


bash
npm install -g expo-cli

설치가 완료되면 expo 명령을 사용할 수 있게 됩니다.

3. 새로운 Expo 프로젝트 생성

Expo CLI를 사용하여 새로운 프로젝트를 생성할 수 있습니다. 원하는 폴더로 이동한 뒤, 다음 명령어를 실행하세요:


bash
expo init MyNewProject

명령어를 실행하면 여러 가지 템플릿 옵션이 나옵니다. 'blank' 템플릿을 선택하여 기본적인 프로젝트를 생성합니다.


bash
cd MyNewProject
expo start

명령어를 실행하면 Expo 개발 도구가 실행되고, 개발 중인 앱을 스마트폰이나 에뮬레이터에서 확인할 수 있는 QR 코드가 표시됩니다.

기본 앱 구조 이해하기

React Native 및 Expo 프로젝트가 생성되면 몇 가지 중요한 파일과 폴더가 포함된 프로젝트 구조를 확인할 수 있습니다:

App.js: 앱의 진입점입니다. 모든 중요한 컴포넌트와 로직은 여기에서 시작됩니다.
assets/: 이미지, 아이콘 등 정적 파일을 저장하는 폴더입니다.
node_modules/: 설치된 모든 npm 패키지가 저장되는 폴더입니다.
package.json: 프로젝트의 메타정보와 의존성을 관리하는 파일입니다.

App.js 파일을 열어보면 기본 React 컴포넌트가 포함된 간단한 템플릿을 볼 수 있습니다. 다음은 App.js의 기본 코드입니다:


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

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

React Native의 주요 개념

Flexbox 레이아웃

React Native에서 스타일링은 CSS가 아니라 Flexbox 레이아웃을 사용합니다. 기본적으로 모든 컴포넌트는 Flexbox 컨테이너로 처리되며, 이를 통해 간편하게 레이아웃을 구성할 수 있습니다.

다음 예제에서는 부모 컨테이너와 자식 요소를 Flexbox를 이용해 가운데 정렬하는 방법을 보여줍니다:


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

export default function MyComponent() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Centered Text</Text>
    </View>
  );
}

상태 관리

React Native에서 컴포넌트의 상태(state)를 관리하는 방법은 React와 동일합니다. 상태는 일반적으로 함수형 컴포넌트의 useState 훅을 사용하여 관리합니다.


javascript
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Count: {count}</Text>
      <Button title="Increase" onPress={() => setCount(count + 1)} />
    </View>
  );
}

Expo를 통한 앱 테스트

Expo를 사용하면 실시간으로 앱을 테스트할 수 있습니다. 스마트폰에서 Expo Go 앱을 설치한 후, QR 코드를 스캔하면 개발 중인 앱을 바로 확인할 수 있습니다. Expo Go 앱은 iOS와 Android 모두에서 사용 가능합니다.

또한, Expo는 에뮬레이터나 시뮬레이터를 통해서도 앱을 테스트할 수 있는 기능을 제공합니다. Android Studio나 Xcode를 설치하고 설정을 마친 후, expo start 명령을 실행하면 에뮬레이터를 통해 앱을 테스트할 수 있습니다.

배포 준비하기

Expo로 개발한 앱을 실제로 배포하기 위해서는 별도의 준비 작업이 필요합니다. Expo의 expo build 명령어를 사용하면, 간편하게 앱을 빌드하고 다양한 플랫폼에 배포할 수 있습니다.


bash
expo build:android
expo build:ios

빌드가 완료되면 Expo는 다운로드 가능한 링크를 제공하여, 이를 통해 앱 스토어나 테스터들에게 배포할 수 있습니다.

결론

React Native와 Expo를 사용하면 네이티브 모바일 애플리케이션을 빠르고 간편하게 개발할 수 있습니다. 특히 Expo는 개발 환경 설정의 복잡함을 줄여주고, 실시간 업데이트와 간편한 배포 기능을 제공하여 매우 유용한 도구입니다. 이 가이드를 통해 기본적인 설정과 예제를 익히고, 더 나아가 복잡한 기능을 구현해 보세요. Expo와 함께라면 모바일 앱 개발이 더욱 쉬워질 것입니다.