Ionic (아이오닉) vs React Native (리액트 네이티브) (feat. 하이브리드 앱) - FE study12

1. 사전지식

• 반응형 웹 (웹) : html, css, js 로 이루어진 웹을 모바일 상의 화면으로 보는 것.
• 네이티브 앱 (앱): android(코틀린) 혹은 ios(스위프트) 환경의 코드로 제작된 모바일용 어플리케이션
• 하이브리드 앱 (앱): 웹 코드로 이용해 각 플랫폼(android, ios)으로 패키징한 어플리케이션 (웹 + 앱)
• 프로그레시브 웹앱 (웹) : 하이브리드 앱처럼 보이지만 설치가 필요하지 않고, 네이티브앱 기능을 사용할 수 있는 어플리케이션

javascript로 많은 것들을 할 수 있게 되었다.

2. 비교

What is that?

• 공통점 : 하이브리드 앱 적용 프레임워크/라이브러리
• Ionic : 모바일 앱 개발에 사용되는 오픈소스, 크로스플랫폼 프레임워크
• React-Native : 모바일 앱 개발을 가능하게 하는 자바스크립트 라이브러리

작동방식

• Ionic : 모바일 기기의 webView 에서 작동

  장점으로는 웹으로 작성된 코드가 거의 그대로 사용되기 때문에 쉽게 모바일화 가능하고, 프로그레시브 웹앱에서도 동일하게 작동한다. 단점으로는 네이티브앱과 비교했을 때 성능이 떨어진다.

• React-Native : 실제 네이티브 환경을 만들어줌

  webView 가 아니라 네이티브 언어로 컴파일 되기 때문에 성능이 좋지만 개발시 네이티브 언어까지 다룰 수 있어야 하기 때문에 비용이 많이 든다는 단점이 있다.

개발환경

• Ionic : cordova / Angular or React 선택 / Android Studio or Xcode

  Angular를 바탕으로 만들어졌고 현재 react까지 지원한다. (vue는 개발중이라고 함) 그리고 cordova를 통해 모바일 플랫폼 빌드를 해준다. 네이티브 기능들은 cordova-plugin 을 통해서 접근.

cordova : HTML, CSS, JS를 이용하여 모바일 플랫폼화 해주는 프레임워크

• React-Native : react-native-cli / React / Android Studio or Xcode

  'React'에 최적화되어있으며, 직접 사용해보지는 않았지만 Ionic 보다는 비교적 까다롭다고 한다.

요약

• Ionic : WebView / 적응성과 재사용성이 중요한 어플리케이션
• React-Native : 성능이 중요한 어플리케이션

잘못된 정보가 있으면 피드백 부탁드립니다!