해당 글의 목적은 React Native 개발을 하기에 앞서서, React Native에 대한 정의와 개발 방식(expo-cli / react-natvie-cli)에 대해 장단점을 알고 선택을 돕기 위한 목적으로 작성한 글입니다.
1) React Native
💡 React Native 란? - 리액트 네이티브는 페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임워크입니다. - JavsScript로 개발하며 IOS나 Andriod, Web, UWP에 대한 모바일앱을 동시에 개발을 할 수 있는 크로스 플랫폼입니다.
[ 더 알아보기 ]
💡 크로스 플랫폼(Cross Platform)이란?
- 여러 플랫폼에서 동작하는 애플리케이션 개발 방법을 의미합니다. 하나의 코드로 여러 플랫폼에 대응할 수 있으며, 개발 비용과 시간을 절약할 수 있습니다. - React Native, Flutter 등이 대표적인 크로스 플랫폼 프레임워크입니다.
2) React Native 개발 방법
1. Expo CLI
💡 Expo-cli 란?
- 보편적인 React 애플리케이션을 위한 프레임워크이자 플랫폼입니다. - 동일한 JavaScript/TypeScript 코드베이스에서 iOS, Android 및 웹 앱을 개발, 빌드, 배포 및 빠르게 반복하는 데 도움이 되는 React Native 및 기본 플랫폼을 기반으로 구축된 도구 및 서비스 세트입니다.
0. 주요 장단점 요약
분류
Expo-cli
장점
- 초기 설정이 쉽고 빠르게 개발이 가능 - 다양한 라이브러리와 플러그인 제공
단점
- 앱 사이즈가 큼 - 빌드 속도가 느림 - 네이티브 모듈의 사용이 제한됨
1. Expo CLI 장점
초기 구성이 쉬어서 빠르고 간편하게 설치가 가능하며 React Native를 처음 개발하는 사람에게 편리하다.
React Natvie를 위한 기본 설정이 미리 구성이 되었다는 장점이 있다.
네이티브 파일들을 개발자에게 숨겨두고 Expo가 자동으로 관리를 해준다
Android / Xcode를 설치하지 않아도 QR코드를 통해서 해당 프로젝트를 실행할 수 있게 해 준다.
Apple / Google Store에 배포와 업데이트를 하기에 간편하다.
배포마다 검사를 받지 않는다.
Expo Wrapper를 포함한 Standalone 앱 배포가 가능하다.
2. Expo CLI 단점
OS Layer와 상호작용이 불가능하다.
Java, kotlin, Object-C, Swiftf로 작성된 네이티브 모듈을 추가할 수 없다.
일부 IOS 및 Andriod API를 사용할 수 없다.
APP의 15 ~ 25MB로 기본 파일 크기가 크다
기능이 많은 앱 개발에는 부적합하다.
블루투스 이용 불가
Eject 기능을 통해 설정하는 작업이 필요해서 오히려 번거로워질 수 있다.
3. Expo CLI Quickstart 수행 방법
# expo-cli 기반 React Native 프로젝트 생성
$ expo init [프로젝트 명]
# React 기반 Expo CLI
$ npm install -g expo-cli
# or
$ yarn global add expo-cli
2. React Native CLI
💡 React-native-cli 란?
- 모바일 개발에 이미 익숙하다면 React Native CLI를 사용하는 것이 좋습니다. 시작하려면 Xcode 또는 Android Studio 설치 및 설정이 필요합니다.
0. 주요 장단점 요약
분류
react-native-cli
장점
- 빠른 빌드 속도 - 네이티브 모듈에 대한 높은 자유도
단점
- 네이티브 모듈을 사용하는 경우 설정이 복잡함
1. React Native CLI 장점
직접 네이티브로 애플리케이션을 개발할 수 있다.
자기가 원하는 언어로 추가 개발이 가능하다- 커스텀 네이티브 모듈
OS Layer와 상호작용이 가능하다.
네이티브 파일들을 직접 다룰 수 있다.
네이티브 모듈을 사용할 수 있다.
필요한 기능이 있는 경우, 모듈을 직접 만들어 사용할 수 있다.
Expo 패키지 이용이 가능하다.
Android Studio와 XCode에서도 빌드, 배포가 가능하다.
2. React Native CLI 단점
프로젝트를 설정하는 데 있어서 올바른 방식으로 설정하기가 어렵고 초기 환경 구성이 오래 걸린다.
프로젝트를 실행하려면 Android / Xcode를 모두 설치해야 하여 빌드 및 배포를 해야 한다.
Mac OS 없으면 IOS용 앱을 빌드할 수 없다.
배포와 업데이트 시간이 상대적으로 오래 걸린다.
안드로이드, IOS에 대한 폴더 구조에 대한 기본지식이 필요하다.
3. React Native Quickstart 수행 방법
# React Native 프로젝트 생성
$ npx react-native init [프로젝트 명]
# React Native에 특정 버전으로 프로젝트 생성
$ npx react-native init [프로젝트 명] --version X.XX.X
# React Native에 Typescript 기반의 프로젝트 생성
$ npx react-native init [프로젝트 명] --template react-native-template-typescript
$ yarn add @types/react @types/react-native --dev
# CRNA (Create-react-native-app) 방식으로 프로젝트 생성
$ npm install -g create-react-native-app
$ create-react-native-app [프로젝트 명]
# react-native-cli install
$ npm install -g react-native-cli
# or
$ yarn global add react-native-cli
# version check
$ react-native --version
