Medium - Comparing the Performance between Native iOS (Swift) and React-Native
in Trend
Trend 파악을 Medium 기고문 요약 포스팅 - Swift와 리액트 네이티브의 성능비교
리액트 네이티브는 자바스크립트만 사용해서 앱을 만들 수 있는 크로스 플랫폼 모바일 프레임워크 입니다. 그러나 다른 하이브리드 모바일 기술과 달리 모바일 웹 앱을 만들지 않습니다.(웹앱은 네이티브 컨테이너 속에 래핑됩니다.) 그러니까 실제 네이티브 앱을 갖게 되는 거죠. 여러분의 자바스크립트 코드베이스로 컴파일된 모바일 앱은 iOS에서 Object-C를 쓰거나 안드로이드에서 자바를 사용하여 만든 앱과 구분이 되지 않습니다. 이말은 리액트 네이티브는 양 플랫폼의 네이티브를 제공하고 하이브리드 모바일 앱이라는 장점입니다.
제 목표는 리액트 네이티브에서 말한 것이 모두 달성할 수 있는지 확인하는 것입니다. 그렇기 때문에 저는 똑같은 앱을 스위프트와 리액티브 네이티브로 만들 것입니다. 앱은 제가 주어진 시간안에 양쪽의 언어를 배워서 만들 수 있을 정도로 간단해야 하지만 CPU, GPU, 메모리 사용량, 전력 소비량들을 비교할 수 있을만큼 복잡해야 합니다. 앱은 네 개의 탭을 가질 것입니다. 첫 번째 탭은 프로파일로서 사용자가 페이스북 로그인을 하고 사용자의 프로필 사진과 이메일, 이름을 표시할 것입니다. 두 번째 탭은 To Do List로써 NSUserDefaults를 사용한 간단한 to do list가 될 것입니다. 거기에는 아이템 추가, 아이템 삭제 함수들이 있습니다. 세 번째 탭은 페이지 뷰어로써 페이지 뷰 컨트롤러로 구성될 것입니다. 페이지 뷰 컨트롤러는 세 개의 화면이 있고 사용자가 스와이프를 통해 초록, 빨강, 파랑으로 변경할 수 있습니다. 마지막 탭은 지도로써 맵 뷰로 구성되고 사용자의 현재 위치를 줌인하거나 파란색 점으로 위치를 나타낼 것입니다.
The Swift Process
첫 번째 앱은 iOS와 스위프트 입니다. 스위프트를 배우는 것은 정말 쉬웠고 저는 이미 자바와 C++을 알고 있었기 때문에 그것과 비슷 했습니다. iOS 프레임워크인 코코아 터치를 배우는 것은 좀 더 어려웠습니다. Udemy.com에서 Rob Percival의 비디오를 보면서 스위프트로 앱을 만들었습니다. 그러나 이 후에도 코코아 터치를 이해하는데 문제가 있었는데 많은 비디오에서는 단지 코드를 복사/붙여넣기 할 뿐이라서 진짜 어떤 것을 수행하는지 알기 어려웠죠. 약간 강사도 왜 하는지 모르고 그냥 기억할 뿐인거 같았습니다. 저는 제 코드가 무엇을 하는지 모르는 것을 좋아하지 않습니다.
애플의 IDE(Xcode)는 이런 당혹스러움 없이 매우 진보되었고 사용자 친화적입니다. 스토리보드에서 앱의 화면을 원하는 대로 구성하고 화살표를 이용해 어떤 화면이 시작화면이 될 지 결정할 수 있습니다. 첫 번째 탭에서 이미지 뷰와 여러개의 라벨을 드래그 하는 것으로 화면을 구성할 수 있었습니다. 그리고 코드에 드래그하여 커넥션을 만들고 새로운 변수를 만들어 처리했습니다. 그리고 사용자가 한번 페이스북에 로그인하면 이 변수들을 페이스북 변수에 저장하도록 했습니다. 저는 이 앱을 만드는데 총 3 주가 걸렸습니다.
Swift Tab 1 (Facebook Login)
Swift Tab 2 (To-Do List)
Swift Tab 3 (Page View)
Swift Tab 4 (Maps)
The React-Native Process
두 번째는 리액트 네이티브 입니다. 자바스크립트를 배우는 것은 스위프트 보다는 어렵지만 그렇다고 해서 또 그렇게 어려운 것은 아닙니다. 인터넷을 통해 리액트 네이티브를 배웠지만 충분하지 않았고 비디오 강의들을 통해 학습을 했습니다. 처음에는 너무 지쳤지만 일 주일쯤 지나니까 리액트 네이티브의 구조를 알게 되었습니다.
iOS와 달리 리액트 네이티브에서 정말 좋았던 점은 여러분이 작성하는 한줄 한줄이 이해가 된다는 것입니다. 추가적으로 iOS와 달리 리액트에서는 모든 세부조정이 완료되어 있습니다. 다른 설정을 할 필요없이 가로모드에서 앱을 만들었고 매우 보기 좋았습니다. 다른 크기의 아이폰 화면에서도 역시 괜찮았죠. 이것은 리액트 네이티브가 HTML의 CSS와 유사한 flexbox를 사용하기 때문입니다. 그것은 앱이 표시되는 화면의 크기에 반응합니다.
React-Native Tab 1 (Facebook Login)
React-Native Tab 2 (To-Do List)
React-Native Tab 3 (Page View)
React-Native Tab 4 (Maps)
The Data
이제 앱들을 비교하며 어떤 것이 더 나은 성능을 보이는지 비교할 때 입니다. 각 테스트에 Apple Instruments를 사용했습니다.
CPU Measurements
Swift VS React-Native CPU Usage
스위프트가 두 개의 탭에서 우월했고 리액트 네이티브가 두개의 탭에서 이겼습니다. 전체적으로 스위프트가 CPU를 17.58% 효율적으로 사용했습니다. 만약 제가 다른 일을 안하고 앱을 만드는데 더욱 집중했으면 다른 결과가 나올 수도 있었을 것 같습니다. 그러나 탭을 옮겨 다닐 때 CPU는 거의 사용되지 않았다는 것을 강조하고 싶습니다.
GPU Measurements
Swift VS React-Native GPU Usage
또 한번 스위프트가 두 개, 리액트 네이티브가 두 개의 탭에서 좋은 결과를 보였습니다. 그러나 전체적으로 이 부분에서는 리액트 네이티브가 초당 0.95 프레임으로 우위를 점했네요. 페이스북이 얼마나 리액트 네이티브 코드를 쥐어짜면서 만들었는지 놀라우 따름입니다.
Memory Measurements
Swift VS React-Native Memory Usage
리액트 네이티브가 세 개의 탭에서 우위를 점했습니다. 전체적으로 리액트 네이티브가 61.96MiB 적게 메모리를 사용했습니다.
Conclusion
스위프트와 리액트 네이티브로 만든 모바일 앱들은 실제적으로 거의 똑같았습니다. 제가 정리한 데이터를 보면 아시겠지만 CPU, GPU, Memory 영역에서 두 앱모두 비슷한 성능을 나타냈습니다.
Summary
- iOS 네이티브 앱과 자바스크립트를 사용한 리액트 네이티브 앱의 비교
- 큰 차이점 없이 비슷한 성능을 나타냄
- 자바스크립트 하나의 언어로 동등한 성능을 가지면서도 웹앱이 아닌 양 플랫폼의 네이티브 앱을 얻을 수 있다는 것은 매우 큰 장점
