[React Native] 개념, Expo 개발 환경 세팅/앱 구조/실행하기

리액트 네이티브란?

React와 앱 플랫폼의 기본 기능을 사용하여 Android 및 iOS 애플리케이션을 빌드하기 위한 오픈 소스 프레임워크

사용자 인터페이스(UI)를 구축하기 위한 JS 라이브러리인 React를 기반으로 하지만,

React는 브라우저를 대상으로 하고, React Native는 모바일 플랫폼을 대상으로 한다.

웹 개발자도 JS를 이용하여 "네이티브" 모양과 느낌을 주는 애플리케이션을 작성할 수 있다.

또한 작성하는 대부분의 코드를 플랫폼 간에 공유할 수 있기 때문에 Android와 iOS 모두에서 동시에 쉽게 개발 가능하다.

리액트 네이티브의 장점

1. 다른 플랫폼에서는 웹으로 개발 후 앱에 인베딩하여 사용하지만,

React Native는 소스 코드를 작성을 하면 실제 네이티브 요소로 변환을 해서 사용한다.

 

2. Re act와 마찬가지로 state, props가 변경되면 React Native의 뷰를 다시 렌더링한다.

React Native가 제공하는 컴포넌트 즉,UI 라이브러리를 활용하여 컴파일한다.

👉 React (생명주기,state,props와 같은 기능들) + React Native (UI Component) = 실제 앱 (웹뷰가 아닌 IOS, Android)

 

3. 크로스 플랫폼이어서 IOS,Android 따로 개발할 필요없이 비슷한 코드로 한꺼번에 개발을 할 수 있다.

Core Components, Natvie Components

📌 Native Components

안드로이드 개발에는 Kotlin/Java , iOS 개발에는 Swift, Objective-C 를 사용한다.

React Native를 사용하면 자바스크립트로 Natvie Components를 런타임 시 안드로이드, iOS 에 맞는 태그로 변환해준다.

* 런타임 : 프로그램이 실행되고 있는 동안의 동작

 

📌 Core Components

Natvie Components는 각자가 원하는 바에 맞게 만들 수 있다.

Core Components는 리액트에서 기본 제공하는 Natvie Components 이다.

<View> 컴포넌트를 사용했으면 안드로이드에서는 <ViewGroup>으로 변환을 해주고, iOS에서는 <UIView>로 변환을 해준다.

리액트 네이티브의 개발 환경

1. Expo

- 개념

  : 무료로 사용하는 3rd Party 서비스이다.

  : 개발자가 쉽게 개발할 수 있다.

- 장점

  : 쉬운 배포 및 버전

- 단점

  : Expo에서 제공하는 기능만 사용 가능하다.

  : 모듈을 따로 만들 수 없다.

  : natvie 파일 제어 불가

  : Expo는 간단하고 편리한 대신 복잡하고 섬세한 제어를 할 수 없다.

 

2. React Native CLI

- 개념

  : React Native만을 이용해서 개발한다.

- 장점

  : 네이티브 파일 및 모듈 사용 가능

  : 네이티브 소스 코드 작성 가능

- 단점

  : Expo에 비해 편의성 부족

  : 사용자가 직접 기본 구성을 해야 해서 시간이 오래 걸림

  : Android studio / X-code 다 설치하여 빌드,배포 해야함

리액트 네이티브 Expo 개발 환경 세팅하기

npx create-app-expo-app 프로젝트명

kimaeri@Aeris-MacBook ReactNative % npx create-expo-app AwesomeProject
Need to install the following packages:
  create-expo-app@2.1.1
Ok to proceed? (y) y
✔ Downloaded and extracted project files.

 

VSCode에서 VS Code ES7+ React/Redux/React-Native/JS snippets 다운로드 후 "rafce" 입력하면 자동으로 react 컴포넌트 생성되는데, React-Native는 "rnfes" 입력하면 react-natvie 컴포넌트가 생성된다.

Expo로 생성한 리액티브 네이티브 앱 구조

 

assets : 이미지등의 에셋 보관

node_modules : 앱을 실행할 때 필요한 모든 라이브러리를 보관

babel.config.js : 바벨을 이용해서 어떻게 코드를 transpile 할지 설정

app.json : 리액트 네이티브 앱 자체의 설정을 넣어주는 곳

App.js : 화면에 보이게 되는 소스 코드 작성

 

 

 

 

* 바벨이란?

최신 자바스크립트 문법을 구형 브라우저에서도 돌수 있게 변환 시켜주는 라이브러리

 

Expo로 생성한 리액티브 네이티브 앱 실행하기

npm start

- 아이폰에서 Expo Go 어플 설치 후 카메라에 QR코드 스캔

 

데스크탑에서 실행하기위해서는

- 안드로이드 : Android Studio 설치, Virtual Device Manager > Pixel 4 > Tiramisu (3.3) 

- 아이폰 : Xcode 설치, Settings > Locations > Command Line Tools > Select Version  

 

터미널에서 i 입력 시 아이폰 시뮬레이터 실행 ,  a 입력 시 안드로이드 시뮬레이터 실행

 

 

 

 

 

 

 

 

 

참고

인프런-따라하며 배우는 리액트 네이티브 기초

https://reactnative.dev/docs/intro-react-native-components