1. React Native란?

2015년 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임 워크이다. 애플리케이션을 개발하기 위해 사용하며, 개발자들이 네이티브 플랫폼 기능과 더불어 리액트를 사용할 수 있게 한다. Swift, Objective-C, java, Kotlin 등을 사용하지 않아도 된다.

2. 리액트 네이티브의 장점

2.1 러닝 커브가 낮다.

리액트 네이티브의 가장 큰 장점이라고 할 수 있는 것은 앱을 만들기 위해 다른 언어를 학습하지 않아도 된다는 것입니다. 물론 JavaScript를 사용하지 않는 개발자라면 이야기는 다르지만 Front-End 개발자, Back-End Node 개발자 라면 바로 앱 개발을 할 수 있습니다.
JavaScript 기반으로 하기에 다른 하이브리드 앱인 자만리-C#, 플루터-Dart 보다 러닝 커브와 진입 장벽이 낮습니다.

2.2 소스 코드 재사용과 생산성.

페이스북의 리액트에서 파생되었기 때문에 그 방식을 그대로 사용했습니다. React는 Component 기반으로 기능들을 분리해 재사용할 수 있는 구조로 되어 있습니다. 또한 기존에 리액트로 개발된 사이트가 있다면 그 사이트의 Component 코드를 그대로 사용할 수 있기 때문에 재사용 가능하면 생산성은 더욱 올라갑니다.
또한 하이브리드 앱의 특징으로 두 개의 OS인 Android와 IOS 모두 한 번에 개발할 수 있기 때문에 개발을 효율적으로 할 수 있습니다.

2.3 비용 그리고 오픈소스

하나의 언어 그리고 하나의 코드로 두 개의 OS 앱을 개발할 수 있기 때문에 일반적인 네이티브 앱을 개발하는 것보다 두배 비용이 저렴하게 듭니다. 또한 기존에 JavaScript를 사용하는 개발자들이 많기 때문에 개발자들을 고용하는데도 좋고 쉽게 배울 수 있습니다.
또한 앱의 유지보수에도 하나의 코드만 수정하면 되기에 유지 보수 비용도 줄어듭니다.
리액트 네이티브는 오픈 소스로 커뮤니티가 활성화되어 있고 많은 블로그에서 정보를 찾아볼 수 있습니다. 오픈 소스의 장점으로 문제 해결하는 데 참고 자료가 많이 있어 생산성을 증대시키고 비용을 절약할 수 있습니다.

3. 리액트 네이티브의 단점

3.1 러닝 커브

러닝 커브는 장점이자 단점입니다. 기존에 OS 네이티브 앱을 개발하던 개발자는 새로운 JavaScript를 학습해야 합니다. 그리고 리액트를 접하지 않았던 개발자들은 새로운 개념인 jsx의 리액트 고유 방식을 이해하고 리액트가 사용하는 props, state 등의 개발 방식을 이해해야 합니다.

3.2 네이티브 보다 성능이 떨어진다.

리액트 네이티브는 네이티브 브릿지를 사용하여 네이티브 스레드를 연결시켜 동작하는 하이브리드 앱이기 때문에 네티이브 개발 방식보다는 당연하게 성능이 떨어집니다.
일반적인 애플리케이션을 만든다고 한다면 문제는 없지만 애니메이션 60 프레임 이상을 사용하거나 자바스크립트 스레드에서 5ms보다 시간이 걸리는 처리를 하게 된다면 성능 저하를 경험할 수 있습니다.

3.3 오픈 소스 그리고 네이티브 기능 개발

오픈 소스이기 때문에 업데이트가 자주 발생합니다. 또한 업데이트 시 수정되는 기능들 때문에 버그가 발생할 수 도 있습니다. 버전을 업그레이드는 출시되자마자 진행하지 않아도 되지만 이는 항상 생각하고 업그레이드를 진행해야 합니다.
또한 네이티브 기능을 개발하기 위해서는 리액트 네이티브에서 기능을 제공해야 합니다. 물론 기본적인 기능들을 제공되고 있지만 신규 기능을 개발하기 위해서는 리액트 네이티브가 지원해주어야 가능합니다.
네이티브의 기능을 연결하는 가이드는 제공하고 있지만 개발은 쉽지 않고 네이티브 지식을 요구하기 때문에 네이트브 언어를 공부하는 것과 같을 수 있습니다.

4. 리액트 네이티브 동작 원리

리액트 네이티브 에서는 기기와 통신하는 모든 자바스크립트의 기능을 분리된 스레드로 처리하면서 성능향상을 이룸

자바스크립트 영역

자바스크립트 스레드: 자바스크립트 코드가 실행되는 장소이며 보통 리액트로 구성되어 있음

브릿지(Bridge)

자바스크립트 코드를 이용해 네이티브 계층과 통신할 수 있도록 연결하는 역할
브릿지는 자바스크립트 스레드(thread)에서 정보를 받아 네이티브로 전달

네이티브 영역

메인 스레드: UI를 담당
섀도(shadow) 스레드: 레이아웃을 계산하는 데 사용하는 백그라운드 스레드
네이티브 모듈: 각 모듈에는 자체 스레드가 있는데, 안드로이드의 경우 thread pool을 공유

5. 개발 환경 설정

React Native 개발환경을 구축하는 방법은 2가지가 있습니다. Expo CLI Quickstart랑 React Native CLI Quickstart.

React Native CLI

모바일 개발에 이미 익숙하다면 React Native CLI를 사용하는 것이 좋습니다. 시작하려면 Xcode 또는 Android Studio가 필요합니다.

장점

필요한 기능이 있는 경우, 모듈을 직접 만들어 사용할 수 있음

단점

초기 구성이 오래 걸림
배포가 불편함

Expo CLI Quickstart

모바일 개발을 처음 사용하는 경우 가장 쉽게 시작하는 방법은 Expo CLI를 사용하는 것입니다. Expo는 리엑트 네이티브를 베이스로 ios, aos, 웹 등을 개발하고 쉽게 빌드, 배포할 수 있게 도와주는 프레임워크입니다.

장점

Expo는 개발 시작하기가 간편하다. 리액트 네이티브를 위한 set up이 미리 구성되어있기 때문
Expo 앱을 개인 핸드폰에 설치한다면 그 장치에서 쉽게 지금까지 만든 앱을 사용해보며 디버깅이 가능
카메라나 알림, 위치 정보 등 여러가지 기능을 Expo SDK에서 제공

단점

Expo에서 제공하는 API만 사용 가능하다. 필요한 기능이 없을 경우, 모듈을 만들어 사용할 수 없음
native 파일들을 크게 제어할 수 없다.
빌드 시간이 오래 걸린다. Expo 빌드는 자체 빌드 서버를 구축하거나 유료로 사용하지 않는다면 빌드 큐에 들어가 자신의 빌드 순서를 기다리게 됨(보통 30분 걸린다고…)
별것도 없는데 앱의 크기가 매우 큼

6. expo 사용

node.js 설치가 되어있어야 합니다.

expo install
app install

ios 은 expo go 어플 설치
안드로이드는 expo 어플 설치

Initialize a new app

이름이 'ImageShare'인 프로젝트 생성

npx create-expo-app ImageShare
cd ImageShare
Start App

=> 폰과 컴퓨터 다 로그인 하기

expo login(관리자 권한으로 powershell 열기)

안될 경우 참고 하기(https://blog.naver.com/mymetanight/222677835698)
=>

npm start(vscode도 관리자 권한으로 실행하거나 powershell 관리자 권한으로 사용하기)

=> 폰에서도 로그인하면 폰에서 작업하는 프로젝트를 확인 할 수 있음

참고

https://ko.wikipedia.org/wiki/%EB%A6%AC%EC%95%A1%ED%8A%B8_%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C
https://firework-ham.tistory.com/102
https://velog.io/@maktubi/React-Native-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C%EB%9E%80