- Published On
React Native란?
Kotlin과 Swift
- 플랫폼별 네이티브 언어: Kotlin은 주로 Android 애플리케이션 개발에 사용되며, Swift는 주로 iOS 애플리케이션 개발에 사용됩니다.
- 독립적 사용: 두 언어는 서로 독립적으로 사용됩니다. 즉, 각각의 애플리케이션에 특화된 개발을 할 때만 사용됩니다.
React Native란?
React Native는 Facebook에서 만든 오픈 소스 프레임워크입니다.
자바스크립트를 사용하여 네이티브 언어(Kotlin, Swift)로 번역-컴파일하여 모바일 애플리케이션을 개발할 수 있습니다.
기존의 React 라이브러리(useState, useEffect, ...)를 사용하여 모바일 앱을 만들 수 있으며, 이는 웹 개발자들이 모바일 앱 개발로 쉽게 전환할 수 있도록 도와줍니다.
- 크로스 플랫폼 개발: 한 번의 코드 작성으로
iOS와 Android 모두에서 실행 가능한 앱을 만들 수 있습니다. - 네이티브 성능: 네이티브 컴포넌트를 사용하여 네이티브 앱과 유사한 성능을 제공합니다.
- 풍부한 생태계: 다양한 플러그인과 라이브러리를 통해 개발 생산성을 높일 수 있습니다.
Expo란?
Expo는 React Native 애플리케이션 개발을 더욱 쉽게 만들어주는 도구와 서비스의 모음입니다.
Expo를 사용하면 설정과 구성에 많은 시간을 할애하지 않고도 React Native 앱을 빠르게 시작할 수 있습니다.
즉, Expo를 사용하여 React Native 앱 개발을 더 쉽게 할 수 있는 커뮤니티 라이브러리 입니다.
- 빠른 초기 설정: 간단한 명령어로 프로젝트를 생성하고 실행할 수 있습니다.
- 빌드 및 배포: 별도의 네이티브 빌드 환경 없이도 앱을 빌드하고 배포할 수 있습니다.
- 풍부한 API: 다양한 네이티브 기능을 쉽게 사용할 수 있는 API를 제공합니다.
EAS란 무엇인가요?
EAS (Expo Application Services)는 모바일 애플리케이션 개발, 빌드, 배포 프로세스를 크게 단순화하고 자동화하는 도구입니다.
EAS는 Expo의 클라우드 기반 서비스로, 다음과 같은 주요 기능을 제공합니다:
- EAS Build: iOS 및 Android 애플리케이션을 클라우드에서 빌드할 수 있는 서비스입니다.
- EAS Submit: 빌드된 애플리케이션을 앱 스토어에 제출할 수 있는 서비스입니다.
- EAS Update: 애플리케이션의 업데이트를 원격으로 배포할 수 있는 서비스입니다.
기존의 방법과 EAS의 비교
기존의 모바일 애플리케이션 빌드 및 배포 방법과 EAS를 비교한 표는 다음과 같습니다.
| 기능 | 기존의 방법 | EAS |
|---|---|---|
| 빌드 환경 설정 | 로컬 환경에 복잡한 네이티브 빌드 도구 설정 필요 | 클라우드 기반 빌드로 로컬 환경 설정 불필요 |
| 빌드 실행 | Xcode, Android Studio에서 수동으로 빌드 실행 | 명령어로 간단히 빌드 실행 (eas build) |
| CI/CD 통합 | 별도의 CI/CD 파이프라인 구성 필요 | EAS의 통합된 CI/CD 지원 |
| 스토어 제출 | 각 스토어에 수동으로 제출 과정 진행 | eas submit 명령어로 자동 제출 가능 |
| 업데이트 배포 | 앱 스토어를 통한 업데이트 필요 | eas update로 원격으로 즉시 업데이트 배포 |
| 빌드 시간 | 로컬 머신 성능에 따라 다름 | 클라우드 기반 빌드로 빠른 빌드 시간 제공 |
| 비용 | 개발자 로컬 환경 구성 비용 발생 | EAS의 서비스 비용 지불 필요 |
| 구성 파일 관리 | 각 플랫폼별로 별도 관리 필요 | EAS에서 통합 관리 가능 |
| 빌드 프로필 | 수동으로 다양한 빌드 설정 관리 | 빌드 프로필을 사용하여 다양한 설정 쉽게 관리 |
| 네이티브 모듈 접근 | 네이티브 코드 직접 작성 필요 | EAS에서 제공하는 네이티브 API 사용 가능 |
RN, Expo, Flutter 비교
| 특징 | React Native | Expo | Flutter |
|---|---|---|---|
| 개발 언어 | JavaScript, TypeScript | JavaScript, TypeScript | Dart |
| 크로스 플랫폼 지원 | iOS, Android | iOS, Android | iOS, Android, 웹, 데스크탑 |
| 성능 | 네이티브 성능과 유사 | 네이티브 성능과 유사 | 네이티브 성능 |
| 생태계 및 커뮤니티 | 매우 활발 | 매우 활발 | 활발 |
| 설정 및 구성 | 수동 설정 필요 | 자동 설정 | 수동 설정 필요 |
| 빌드 및 배포 | 수동 설정 필요 | 자동화된 빌드 및 배포 | 수동 설정 필요 |
| 네이티브 모듈 접근 | 직접 네이티브 코드 작성 필요 | Expo에서 제공하는 API 사용 가능 | 직접 네이티브 코드 작성 필요 |
| 최신 동향 | 꾸준히 성장 중 | 꾸준히 성장 중 | 최근 대규모 해고 후 성장세 둔화 |
RN의 대표 컴포넌트
View
View 컴포넌트는 HTML의 div와 유사한 역할을 합니다.
레이아웃을 구성하고, 스타일을 적용하며, 하위 컴포넌트를 감싸는 데 사용됩니다. 웹페이지와 달리 display는 flex 컨테이너이며, flex-direction의 기본값이 column입니다. 공간을 분리할 때는 width나 height 대신 flex: 1, flex: 1.5 등의 속성을 사용합니다.
Text
Text 컴포넌트는 화면에 텍스트를 표시할 때 사용됩니다. React Native는 HTML이 아니기 때문에 p, span, h1 등의 요소를 사용할 수 없으며, 유사한 역할을 하는 Text 컴포넌트를 사용합니다. 모든 텍스트는 <Text> 태그 안에 감싸야 합니다.
StatusBar
import { StatusBar } from 'react-native';
import { StatusBar } from 'expo-status-bar';
두 버전의 StatusBar가 있으나 Expo 버전이 조금 더 유연하여 Expo를 많이 사용합니다.
StatusBar 컴포넌트는 장치의 상태 표시줄을 제어하는 데 사용되며, 상태 표시줄의 스타일, 배경색, 내용 색상 등을 설정할 수 있습니다.
Image
Image 컴포넌트는 이미지를 표시하는 데 사용됩니다. 네트워크 이미지, 로컬 이미지, 데이터 URI 등을 소스로 사용할 수 있습니다.
ScrollView
ScrollView 컴포넌트는 스크롤 가능한 컨테이너를 제공합니다. 많은 양의 콘텐츠를 스크롤할 수 있도록 합니다.
TouchableOpacity
TouchableOpacity 컴포넌트는 터치 가능한 요소를 생성합니다. 사용자가 누르면 요소의 불투명도가 줄어드는 효과를 제공합니다.
RN vs Expo
React Native와 Expo는 모두 모바일 앱 개발을 쉽게 하기 위해 만들어졌지만, 각기 다른 목적과 철학을 가지고 있습니다. React Native는 네이티브 코드를 직접 작성하고 통합할 수 있는 유연성을 중시합니다. 반면, Expo는 개발 경험을 간소화하고 생산성을 높이기 위해 더 많은 추상화를 제공합니다.
결론적으로, 간단하고 빠르게 앱을 개발하고자 한다면 Expo가 적합하며, 복잡한 네이티브 기능을 필요로 하거나 기존 네이티브 코드를 활용해야 한다면 React Native를 선택하는 것이 좋습니다.
다음 포스트
RN 폴더 구조 자세히 살펴보기