[React Native] 개요, Expo 세팅

yii·2023년 12월 31일

React Native

목록 보기
1/5

Expo Cli 초기 앱 구축을 빠르게 도와줌
React Native Cli 오래 걸리지만 기능 구현에 자유도가 높음

React Native란

  • 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크
  • Javascript 하나로 Android, ios
  • 높은 생산성


Bridge

  • 각 플랫폼의 native UI 요소에 접근하는 인터페이스를 제공
  • javascript로 코드 짜면 native로 bridge가 변환해줌

react native 장점

  • 하나의 코드로 관리, 러닝커브(활용도) 높은 React 사용
  • 코드 푸시로 빠른 업데이트 -> 비용 절감
  • Fast Refresh
  • 오픈소스 플랫폼, 규모도 큰 편

react native 단점

  • 일부 기능 Native 접근 필요
  • 오픈 소스, 라이브러리 의존도
  • 성능
  • 잦은 업데이트

Expo Cli

  • React Native 앱을 쉽고 빠르게 구축하는 종합선물세트
    장점
  1. 기본제공되는 API,라이브러리 -> 초반 앱 개발 단순화
  2. Expo Go 어플만 있으면 기기 상관없이 프로젝트 실행 가능
    단점
  3. 추가 네이티브 모듈 사용 불가

React Native Cli

  • 고도화된 기능 개발 및 높은 자유도를 위해 선택
    장점
  1. 네이티브 모듈 연결 가능 -> 다양한 라이브러리 사용으로 높은 자유도
    단점
  2. 기본 제공되는 라이브러리가 적어, 필요한 것이 있다면 직접 설치
    (화면 전환하는 내비게이션 기능도 따로 설치)
  3. Mac개발 필수, Native 폴더 구조에 대한 기본 지식 필요

Cli 선택은 구현하고자 하는 애플리케이션 특성에 맞게

기준!
구현하고자 하는 모든 기능이 Expo에서 지원되는가?
(간단한 앱은 제작 가능)
인앱결제 Expo에서 지원X -> Expo cli->react native cli <-명령어 한 줄로 변환 가능

Expo

  • node.js
  • Git
  • Watchman(mac에서만)

-VS Code Editor
-Yam (패키지 설치)
https://expo.dev/

npx exph -h
npx는 기존에 설치되어 있지 않은 node tool사용 가능하고 디스크 공간 절약 가능
npm으로
install하지 않고도 최신 버전의 명령어 사용 가능

npx create-expo-app my-app
cd my-app

starting development server
npx expo start

스캔 안될 경우 URL 입력
exp://192.168.0.103:8081

profile
프론트엔드 개발자

0개의 댓글