React Native의 모든 것 (23.6.29 기준-지속적으로 업데이트)

posinity·2023년 6월 8일

react native

React Native

목록 보기

1/3

메타(구 페이스북)가 개발한 오픈 소스 크로스플랫폼 모바일 애플리케이션 프레임워크

(1) 언어

자바스크립트, 타입스크립트

(2) 사례

(2-1) 국외

리액트 네이티브 공식 홈페이지 참고

(2-2) 국내

배달의민족 라이더앱 ‘배민커넥트’
동남아시아 기반 ‘토스 글로벌’ 앱
애니메이션 스트리밍 서비스 ‘라프텔’
전자책+웹툰 서비스 ‘리디북스’
챌린지 어플 ‘챌린저스’
건강 관리 어플 ‘레어투게더’

(3) 작동 원리

react native는 브라우저를 이용하지 않는다.
대신 Bridge를 통해 native(안드로이드, ios)에 요청을 보낸다 (버튼을 만들어줘! 같은)
native는 요청대로 자신의 운영체제에 맞게(iOS, Android) 작업을 수행한다

react native는 상단 그림의 JavaScript 코드를 작성하는 것이다
따라서 Bridge와 Native 부분은 신경 쓸 필요가 없다
1.Native에서 이벤트 감지 → 2. 이벤트에 관한 데이터 수집 → 3. Bridge에서 데이터에 관한 json 메세지 생성 → 4. 자바스크립트 코드(리액트 네이티브 코드)가 메세지를 받음 → 5. 이벤트에 맞는 코드를 실행시킴(native에 메세지를 보냄) → 6. native가 메세지에 따라서 동작함(화면을 바꿈)

(4) 장점

2015년 출시 이후 대중적으로 사용 : 커뮤니티가 크고, 버그 등이 생겼을 경우 참고할 만한 자료 많음
스토어를 거치지 않고 CodePush를 통해 배포 가능
1. 오류 해결을 바로바로 할 수 있음
2. 최신 버전 사용자의 비율을 높일 수 있음
멀티 플랫폼에 대한 유연성 & 소스 코드 재사용성 높음 : Android, iOS 뿐만 아니라 Web과도 코드 공유 가능 (Hook을 만들어 재사용이 가능함)
다양한 외부 라이브러리 : 지도, 에디터, 결제모듈, 생체인식 등 다양한 기능을 사용할 수 있게 해주는 라이브러리가 많고, 일부 제외 안정성도 뛰어남
핫 리로딩 지원 : 작업한 화면을 즉시 확인할 수 있음
리액트를 안다면 리액트 네이티브로 개발하기 어렵지 않음 : 리액트 네이티브 ui알바를 진행했을 때 리액트만 안 상태에서도 금방 적용해서 개발했음
유지보수 비용 감소 : 하나의 코드와 언어로 안드로이드와 ios 앱을 개발할 수 있어 비용이 저렴하며, 개발자를 고용하기 쉬움

(4-1) CodePush 추가 설명

MS에서 만든 오픈소스로 React Native나 Apache Cordova로 개발한 앱을 심사과정 없이 바로 업데이트 할 수 있도록 해주는 서비스

앱을 처음 시작할 때 업데이트 유무 확인 후, 업데이트 버전이 있다면 업데이트를 진행한다.

리액트 네이티브 앱은 JS 파일과 이미지로 이루어져 있다. 이는 번들링 된 이후, .ipa 혹은 .apk 파일로 배포하는 과정을 거친다.

번들링 과정
1. React Native는 <react-native run 'platform'> 명령어를 통해 프로젝트를 구동하면 먼저 로컬에 index.platform.bundle을 게시하는 노드 웹서버를 실행합니다.
2. 그 다음 platform에 해당하는 iOS/Android 프로젝트를 빌드하고 에뮬레이터 혹은 디바이스에 설치됩니다. 이 프로젝트에서 로컬에 구동된 index.platform.bundle을 다운로드 받습니다.
3. 다운로드 후에 React Native 빌드 프로세스를 통해 JavaScript 런타임 환경으로 전달되어 프로젝트가 구동됩니다. 이후부터는 JavaScript의 수정이 생기면 새로 고침만으로 변경사항을 확인할 수 있습니다.
4. 그렇기 때문에 여러 대의 기기에 한 번 설치 후에는 다시 컴파일이 필요 없이 변경사항을 확인할 수 있습니다.

코드푸시 서버는 코드 푸시 서버에 JS 파일과 이미지를 업데이트 함으로써, 즉시 앱을 업데이트하는 것을 가능하게 한다.

또한 코드 푸시는 유저에게 동작되는 버전을 제공하기 위해, 이전 버전의 업데이트를 유지하고 있다. 그래서 실수로 크래시가 있는 버전을 업데이트 하는 경우 자동으로 롤백이 가능하다.

단, 네이티브 코드를 업데이트 하는 경우엔, 당연히 코드푸시로는 불가능하다.

!주의 : 앱스토어 심사 중에는 절대 코드 푸시를 넣으면 안된다.

(5) 단점

가끔 일관성 없는 UI : 대부분 괜찮으나, 안드로이드와 iOS에서 보이는 UI가 다를 경우 있음 → 체크 및 검증 필요
라이브러리 의존도 높음
1. 일부 라이브러리의 낮은 완성도 : 리액트 네이티브에 자체적으로 구현되지 않는 기능들은 써드 파티 라이브러리를 써야 하는데, 일부 라이브러리가 완성도가 낮은 경우가 있음
2. 필요한 라이브러리가 다른 버전의 리액트 네이티브 버전에 의존하고 있다면, 강제적으로 다른 버전을 사용해야 하거나 다운그레이드 해야하는 경우가 있음
프로젝트가 커질수록 빌드 시간이 커짐
jsx라는 리액트 고유의 방식과 리액트에 존재하는 개념(hooks, props, state 등)을 공부해야 함
네이티브 앱 보다는 기능 & 성능 측면에서 떨어짐

(6) Expo vs React native CLI

앱에 어떤 기능이 들어갈 지 정의하고, 그 기능이 expo에서 구현 가능한지 확인할 필요가 있음.
https://docs.expo.dev/versions/latest/ expo에서 제공하는 기능 확인 가능 (카메라, 알림, 위치 등의 기능 제공)
기능의 제약 때문에 React Native CLI로 개발하는 경우가 더 많은듯.
네이버 지도, 카카오맵같은 지역 모듈을 사용한다면 React Native CLI로 개발하는걸 추천한다고 함 → expo에서 사용하려면 eject를 통해 expo클라이언트에서 꺼내 React-native로만 개발하는 환경을 만들거나, 웹뷰를 써야한다고 함
eject란? expo에서 지원하지 않는 기능들을 사용하기 위해 씀. → 설정이 복잡하고 관련 자료를 찾기 힘듦. 또 작동이 잘 되는지 확인하려면 시뮬레이터를 켜야 함. eject를 사용할꺼면 그냥 React Native CLI로 개발하는게 나은 듯.

(6-1) Expo의 동작과정

EXPO는 로컬 개발환경에 두개의 서버를 띄워 동작합니다. EXPO 모바일 클라이언트에 react-native가 번들링 한 JavaScript 파일을 내려주기 위한 서버와 EXPO-CLI와 expo 모바일 클라이언트 둘 사이의 통신을 위한 서버를 띄웁니다.

엑스포 클라이언트는, 작성한 코드가 모바일 네이티브 환경에서 직접 구동되는것이 아니고, 받아온 React-Native 앱을 엑스포 클라이언트 안에서 실행시킨다.

” EXPO 안에 들어가는 앱은 순수 JavaScript로 작성되고, 절대로 네이티브 iOS나 Android 레이어까지 내려가지 않는다. 이것은 EXPO의 핵심 철학이고, EXPO를 빠르게, 사용하기 좋게 만들어주는 부분이다. ” - expo 공식문서

(7) 앱 심사

애플 앱스토어는 앱 심사 기준이 까다롭다고 함
웹뷰 앱이라면 앱에 네이티브형 기능이 포함되어야 한다고 함 (푸시알림,카메라제어,위치안내,기타 스마트기기 사용옵션 등..)
소셜 로그인을 제공하는 웹앱은 애플 로그인 기능을 지원해야 한다고 함
구글 플레이스토어 등과 같은 타 os가 언급되지 않도록 해야 함
실물상품을 제외한 상품 판매 – 디지털제품, 기부,후원,구독 등은 애플 인앱 결제모듈을 탑재해야 함.(일반 카드 결제 등의 전자결제모듈 이용불가) → 애플에서 인앱 결제를 요구할 경우 필수로 등록해야 하며, 응하지 않을 경우 출시 불가(인앱 셋팅을 안한다면 결제 기능도 모두 제거해야 함)
- 현재는 국내에 한해 외부 결제가 가능한 것으로 보임 (https://www.bloter.net/news/articleView.html?idxno=42797)
- 애플 공식 사이트 https://developer.apple.com/kr/support/storekit-external-entitlement-kr/
- 해당 법령을 준수하기 위해 개발자는 StoreKit External Purchase Entitlement(외부 구입 권한)을 사용할 수 있습니다. 해당 Entitlement(권한)을 사용하면 대한민국에서 App Store를 통해 배포되는 앱에만 대체 앱 내 결제 처리 옵션을 제공할 수 있습니다. Apple의 앱 내 구입 시스템을 계속 사용하고자 하는 개발자는 추가 조치 없이 계속 사용할 수 있습니다.
  다른 결제 시스템을 사용하고자 하는 개발자는 Xcode에서 Entitlement(권한)를 활성화하고 필요한 StoreKit API를 사용하여 대한민국의 App Store에서만 배포되는 별도의 iOS 및/또는 iPadOS용 앱 바이너리를 제출해야 합니다.