⚒ 개발 방식에 따른 모바일 애플리케이션의 분류 ⚒
1. 네이티브 애플리케이션 📲
운영체제를 구성하는 언어와 같은 언어로 만들어지는 애플리케이션
IOS: Objective-C or Swift
Android: Java or Kotlin
- 장점: 높은 성능이 보장됨
- 단점: 각각의 언어로 개발해야하고, 개발에 투입되는 리소스가 많아짐
2. 하이브리드 애플리케이션 📡
하이브리드 앱은 모바일 웹 사이트를 감싼 네이티브 앱으로
네이티브에 필요한 것은 앱단에서 담당
View(화면구성)은 HTML담당
- UI만드는데는 디자인에는 스타일시트를 이용
- 기능은 자바스크립트를 통해서 구현
- 외적인 부분 앱관련은 네이티브에서 돌아가기는 하지만
뷰에대한 부분들은 웹기술을 통해서 개발을 하는데 핵심을 두고 있다- 기본적으로 앱의 형태로 나오고 네이티브로서 컨테이너가 되어 있는 상태
- 네이티브에서 받을 수 있는 push notification 이라던가
여러 네이티브에서 필요한 기능들은 앱단에서 담당- 두 가지가 애플리케이션에 같이 탑재되어 있어서 하이브리드라고 한다.
- 웹뷰를 이용해 보여지는 영역에 HTML을 보여줌
- HTML+CSS+JS 를 이용한 화면 구현
- 네이티브로 만들어진 앱 컨테이너로 네이티브 기능 연동
- 간혹 웹으로 구현했던 것을 하이브리드로 옮기는 경우도 있는데 완전히 같은건 아니다.
- 웹에서는 perfomance가 괜찮았던 것이 하이브리드로 오면 그 performance가 나오지 않는 경우도 있다 -> 최적화 필요
- 러닝커브도 생기게 된다
:특정 기술을 습득할 때에 처음에는 학습 효과가 더디다가 어느 정도 이해를 하고 나면 빠르게 습득하고 후에는 다시 더뎌지는 곡선
- 장점 : 웹 기술에 익숙하다면 빠른 개발 가능
- 단점 : 뷰 퍼포먼스 최적화가 힘들다
Apache Cordova나 Iocin, Appcelerator Titanuim 등을 사용할 수 있다.
웹뷰를 이용한다.
3. 🔀 크로스 플랫폼 네이티브 애플리케이션
- 네이티브가 아닌 언어로 작성하지만 빌드 단계에서 네이티브로 변환됨
- 리액트 네이티브(JS), 유니티(c#), 자마린(c#), 플러터(Dart) 등
- 최종 결과물이 네이티브로 나온다
- 여러 플랫폼을 동시에 개발 가능(IOS, Android)
- 장점: 자신에게 익숙한 언어로 빠른 개발 가능
- 단점 : 네이티브 연동 기능이 많을 경우에는 효율성 떨어짐
유니티 : 3D, Game관련. 유니티 에디터를 통해 화면구성
자마린 : 자마린 폼즈를 이용해서 화면 구성. 마이크로소프트에서 개발 환경 지원
플러터: 리액트 네이티브 벤치마킹 . 다트라는 자바스크립트 기반 언어. 구글에서 별도의 UI는 없지만 화면구성과 로직을 다트에서 이용한다.
리액트네이티브: 자바스크립트 기반언어. 독자적으로 JSX(JS+XML=혼합형태) 사용. 화면 구성과 로직 모두 JSX이용
🤔 그럼 리액트 네이티브는 무엇일까?
공식 사이트의 답변
리액트 네이티브를 사용해 "모바일 웹 앱", "HTML5 앱" 혹은 "하이브리드 앱"을 만드는 것이 아닙니다.
object-C 또는 Java를 사용하여 만든 앱과 구별 할 수 없는 실제 모바일 앱을 만들 수 있습니다.
1. JSX
-
Javascript + XML
- 독자적인 것이 아니라 표준규격 2개 합쳐놈! -
ECMA Script 6 표준의 자바스크립트 사용
-자바스크립트의 경험들 가져올 수 있음! -
JSX 내에 스타일 시트를 포함
- 자바스크립트의 스타일과는 약간 다름! -
웹의 CSS와 많은 개념을 공유하지만 별도의 독자적인 포맷 CSS파일로 작성 불가
-
태그에 대한 설정
xml = attribute
react, jsx = props
XML과 JSX 태그의 비교!
- xml, html은 태그에 값을 할당하는게 문자열 밖에 없어서 string으로 감싸서 표현이 되는데,
- jsx는 숫자, 배열, 오브젝트와 같은 값을 넣을 수 있어서 { } 중괄호를 사용한다. 또한 JSX에서 { } 중괄호가 나오게 된다면 js의 문법을 사용한다는 의미이다.
2.React의 렌더링
JSX - > REACT (VIRTUAL DOM) - > HTML (VIEW)
3. React-Native의 렌더링
JSX - > REACT (VIRTUAL DOM) - > Android, IOS VIEW
JSX를 네이티브 뷰 형태로 렌더링 함!
4. React-Native의 구조
- 데이터 처리는 자바스크립트가 수행하고 뷰와 자바스크립트 엔진을 연결하는 브릿지가 존재!
- 핵심은 브릿지
- 화면에는 네이티브 뷰가 보이지만 백그라운드에서는 자바스크립트 엔진이 핸들링하고 그게 뷰에 반영된다.
- 또 뷰에 입력된게 자바스크립트 엔진에 저장되고 브릿지를 통해 열심히 전달!
