React & React Native/이해하기

[RN] React Native 이해하기 및 개발 방법 선택 : Expo-cli, React-native-cli

adjh54 2022. 2. 8. 15:09
728x170
해당 글의 목적은 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

 

 

 

오늘도 감사합니다😀

 

 

 

그리드형