React-Native는 JavaScript만 사용하여 앱을 제작할 수 있는 하이브리드 모바일 프레임워크입니다. 그러나 다른 하이브리드 모바일 기술과 달리 “모바일 웹앱”(기본 컨테이너에 래핑된 웹 응용 프로그램)을 만들지 않습니다. 결국, 당신은 진짜를 얻습니다. 자바스크립트 코드 베이스로 만들지만 Objective-C 또는 Java를 사용하여 작성된 iOS, Android 앱과 구별이 어려울 정도의 동일한 앱으로 컴파일 됩니다. 즉, React-Native는 네이티브 및 하이브리드 모바일 앱의 이점을 모두 제공합니다.

나의 목표는 그들이 약속한 것을 정확히 전달할 수 있는지 찾아내는 것입니다. 이를 위해 스위프트(Swift)와 React-Native를 이용한 동일한 앱을 제작합니다. 그것은 두 언어를 모두 배울 수 있을 만큼 간단하지만, 시간에 맞춰 앱을 완성할 수 있어야 하고, 각 앱의 CPU, GPU, 메모리 사용량 및 전력 사용량을 비교하기 위해 조금 복잡합니다. 앱에는 4개의 탭이 있습니다. 첫 번째 프로필의 이름은 “Profile”로 지정되며 사용자의 프로필 사진, 이름 및 이메일을 검색하여 페이지에 표시하기 위해 Facebook에 로그인하라는 메시지가 표시됩니다. 두 번째 탭은 “To Do List”라고 하며 NSUserDefaults(iPhone 내부 메모리)를 사용하여 목록을 작성하는 것으로 간단합니다. 그것은 “항목 추가” 및 “항목 삭제” 기능을 갖습니다. 세 번째 탭의 이름은 “Page Viewer”이며 페이지 뷰 컨트롤러로 구성됩니다. 페이지 뷰 컨트롤러에는 사용자가 스와이프(“녹색”, “빨간색” 및 “파란색” 화면) 할 수 있는 세 개의 화면이 있습니다. 마지막 탭의 이름은 “Maps”이며 크기를 확대할 수 있는 뷰와 사용자의 위치를 ​​나타내는 지도상의 파란색 점으로 구성됩니다.

Swift 프로세스

처음 작업은 iOS와 Swift입니다. Swift를 배우는 것은 내가 이미 알고 있는 많은 언어(Java, C ++)와 비슷하기 때문에 상대적으로 쉬웠습니다. 그러나 코코아 터치(Cocoa Touch, iOS 프레임워크)를 배우는 것은 훨씬 더 힘든 작업이었습니다. Udemy.com에서 몇 가지 앱을 Swift로 만들어 보는 Rob Percival의 비디오 시리즈를 보았습니다. 소개 비디오 이후에도 나는 여전히 코코아 터치를 이해하는 데 어려움을 겪고 있었습니다. 이 비디오에서 “학습”의 대부분은 코드 복사/붙여 넣기와 관련이 있었고 자세한건 알 수 없었습니다. 나는 그저 그것을 암기한 느낌을 받았습니다. 내 코드의 모든 줄이 무엇인지 모르는 것이 싫었어요.

Apple의 IDE(Xcode)는 의심할 여지없이 매우 고급 툴이며 사용자에게 친숙합니다. 스토리보드(Storyboard)를 클릭하고 원하는 순서대로 앱 화면을 설정하여 앱이 시작될 화면에 화살표를 넣을 수 있습니다. 첫 번째 탭(‘Profile’)에서 필자는 원하는 위치에서 이미지보기, 이름 라벨 및 이메일 라벨을 드래그 할 수 있었습니다. 그런 다음 코드로 드래그하여 연결하여 프로세스의 코드에 새 변수를 만듭니다. 프로그래밍 방식으로, 일단 사용자가 Facebook을 통해 로그인하면 해당 변수 이름을 해당 Facebook 값으로 설정합니다. 동영상 시리즈를 제작하고 Swift/iOS에서 편안하게 코딩하는 데 3주가 걸렸습니다.

이 링크의 GitHub에서 이 앱의 Swift 버전에 대한 코드를 볼 수 있습니다: https://github.com/jcalderaio/swift-honors-app


Swift 탭 1 (Facebook 로그인)


Swift 탭 2 (To-Do 리스트)


Swift 탭 3 (페이지 뷰)


Swift 탭 4 (지도)

React-Native 프로세스

두 번째는 React-Native 였습니다. JavaScript 학습은 Swift보다 약간 어렵지만 그렇게 어렵지는 않습니다. 나는 인터넷에서 배운 React-Native의 조각 지식들로부터 앱을 코딩하려고 시도했지만, 충분하지는 않았습니다. 비디오 강의가 필요했고요. Udemy.com으로 돌아가서 Stephen Grider의 React-Native에 대한 놀라운 소개를 보았습니다. 처음에 나는 엄청나게 압도당했습니다. React-Native의 구조는 전혀 이해가 되지 않았지만 Stephen의 강의를 1주일 동안 지켜본 후 나만의 코딩을 시작할 수 있었습니다.

내가 React-Native에 대해 정말로 좋아하는 점은, iOS와는 달리, 작성하는 코드의 모든 라인의 의미를 알 수 있다는 것입니다. 또한 iOS와는 달리 React-Native에서는 모든 조정 작업(화면 크기에 따라 가로 및 세로로 잘 보일 수 있도록 각 페이지의 설정을 조정하는)이 수행됩니다. 어떤 설정도 없이, 나는 가로모드의 앱을 사용하고 있었고 완벽하게 잘 보였습니다. 또한 다양한 iPhone 크기의 앱에서 실행했고 거기에서도 잘 보였습니다. React-Native는 flexbox(HTML 용 CSS와 유사)를 사용하기 때문에 앱이 표시되는 화면의 크기에 반응합니다.

이 링크의 GitHub에서 이 앱의 React-Native 버전에 대한 코드를 볼 수 있습니다: https://github.com/jcalderaio/react-native-honors-app


React-Native 탭 1 (Facebook 로그인)


React-Native 탭 2 (To-Do 리스트)


React-Native 탭 3 (페이지 뷰)


React-Native 탭 4 (지도)

데이터

이제 어느 앱이 더 나은 결과를 보여줄지 알아보기 위해 앱을 서로 마주할 시간이 되었습니다. 나는 CPU(Time Profiler Tool), GPU(Core Animation Tool), 메모리 사용(Allocations)의 세 가지 범주에 걸쳐 두 개의 앱을 테스트하기 위해 Apple Instruments(Xcode, Apple’s IDE에 포함된 도구)를 사용했습니다. Apple Instruments를 사용하면 모바일을 연결하고, 모바일에서 실행중인 앱을 선택하고, 사용하려는 측정 도구를 선택한 다음 레코딩을 시작할 수 있습니다.

각 앱에는 4개의 탭이 있으며 각 탭에는 각 카테고리에서 측정하기 위해 수행할 “작업[task]”이 있습니다. 첫 번째(“Profile”) 탭의 기능은 Facebook을 통해 로그인하는 것입니다. 이 코드에는 Facebook의 서버에서 앱으로 반환될 프로필 사진, 이메일 및 이름에 대한 그래프 요청이 있습니다. 두 번째(To Do 리스트) 앱의 작업은 목록에서 “할 일”을 추가 및 삭제하는 것입니다. 세 번째(‘Page View’) 탭의 작업은 3개의 페이지뷰 화면을 스와이프하는 것입니다. 네 번째 탭(‘Maps’) 탭의 작업은 탭을 클릭하기만 하면 코드가 GPS를 이용해 지도에서 현재 위치로 확대하고 파란색으로 빛나는 깜박임을 보여줍니다.

CPU 측정


Swift VS React-Native CPU 사용량

각 카테고리를 살펴보겠습니다:

Profile: React-Native는 CPU의 1.86%를 더 효율적으로 사용하여 이 탭에서 약간의 우위를 차지했습니다. 작업을 수행하고 측정치를 기록하는 동안 “페이스북으로 로그인” 버튼을 누른 순간 CPU 사용량이 급증했습니다.

To-Do 리스트: React-Native는 이 탭에서도 CPU를 1.53% 더 효율적으로 사용함으로 승리했습니다. 작업을 수행하고 측정값을 기록하는 동안 “목록”에 항목을 추가한 순간과 삭제한 순간에 CPU 사용량이 급증했습니다.

페이지 뷰: 이번에는 Swift가 React-Native를 능가하여 8.82% 더 효율적으로 사용했습니다. 작업을 수행하고 측정치를 기록하는 동안 페이지뷰에서 다른 페이지로 스와이프 한 순간에 CPU 사용량이 급증했습니다. 일단 페이지에 머물게 되면 CPU 사용량이 감소하지만 페이지를 다시 스와이프하면 CPU 사용량이 증가합니다.

지도: Swift가 이 카테고리에서 13.68% 더 효율적으로 사용해서 다시 승리했습니다. “Maps” 탭을 눌러서 MapView가 내 현재 위치를 찾고 파란색 점으로 표시하는 작업을 수행하고 측정치를 기록하는 동안 CPU 사용량이 급격히 증가했습니다.

네, Swift는 두 개의 탭에서 승리했고 React-Native도 두 개의 탭에서 승리했지만 전반적으로 Swift가 CPU를 17.58% 더 효율적으로 사용했습니다. 한 가지 작업에만 집중하고 멈추는 대신 각 앱에서 더 많은 시간을 할애하면 결과가 달라졌을 수 있습니다. 또한, 탭에서 탭으로 변경할 때는 CPU가 전혀 사용되지 않았다는 것을 알았습니다.

GPU 측정

두 번째 데이터 세트는 GPU 측정입니다. Swift와 React-Native의 각 탭 당 하나의 작업을 수행하고 측정 값을 기록합니다. Y축은 초당 최대 60 프레임(fps)을 나타냅니다. 두 번째로, 탭 작업을 수행하는 시간 동안 측정은 “Core Animation” 도구에 의해 기록됩니다. 나는 이들의 평균을 취해 다음 차트에 그려보았습니다.


Swift VS React-Native GPU 사용량

각 카테고리를 살펴보겠습니다:

Profile: Swift는 React-Native보다 1.7 fps 높은 속도로 이 탭에서 약간 우세합니다. 작업을 수행하고 측정 값을 기록하는 동안 “페이스북으로 로그인” 버튼을 눌렀을 때 fps가 급증하는 것이 관찰되었습니다.

To-Do 리스트: React-Native는 Swift보다 6.25 프레임/초 높은 속도로 실행하여 이 카테고리에서 승리했습니다. 작업을 수행하고 측정 값을 기록하는 동안 “목록”에 항목을 추가한 순간과 삭제한 순간에 fps가 급증했습니다.

페이지 뷰:이 탭에서 3.6 fps 이상으로 실행하여 Swift가 React-Native를 박살냅니다. 작업을 수행하고 측정을 기록하는 동안 페이지를 빠르게 스와이프하면 fps가 최고 50까지 올라갔었습니다. 일단 페이지에 머무르면 fps가 줄어들었지만 페이지를 다시 스와이프하면 fps가 다시 높아집니다.

지도: React-Native는 Swift보다 3 fps 높기 때문에 이 카테고리에서 승리합니다. ‘Maps’ 탭을 눌러 MapView에서 현재 위치를 찾고 파란색 점으로 강조 표시하고 측정치를 기록하는 동안 fps가 급격히 증가했습니다.

다시 한번 Swift는 두 개의 탭을 획득했고 React-Native도 두 개의 탭에서 승리를 얻었습니다. 그러나 React-Native가 전체적으로 0.95 fps 만큼 이겼습니다. 페이스북이 React-Native의 코드를 얼마나 최적화 했는지 놀랍습니다. – 지금까지는 네이티브 iOS(Swift)에 맞서는 것처럼 보입니다.

메모리 측정

그래프로 표시할 세 번째 데이터 세트는 메모리 측정값입니다. Swift와 React-Native의 탭마다 작업을 수행하고 측정 값을 기록합니다. Y축(메모리)이 가장 높은 측정 값만큼 높아졌습니다. CPU 사용의 샘플 간격은 1ms입니다. 각 ms는 작업을 수행하는 동안 “Allocations” 툴로 측정 값을 기록합니다. 평균을 취해 다음 차트에 그려보았습니다.

각 카테고리를 살펴보겠습니다:

Profile: Swift는 0.02 MiB 적은 메모리를 사용하여 이 탭에서 약간 우세합니다. 작업을 수행하고 측정값을 기록하는 동안 “페이스북으로 로그인” 버튼을 누른 순간 메모리 사용량이 급증했습니다.

To-Do 리스트: React-Native는 Swift 보다 0.83 MiB 적은 메모리를 사용하여 이 탭에서 우세합니다. 작업을 수행하고 측정값을 기록하는 동안 “목록”에 항목을 추가한 순간 메모리 사용량이 급증했으며 목록에서 항목을 삭제하면 메모리 사용량이 줄어들었습니다.

페이지 뷰:이 탭에서 React-Native는 0.04 MiB 적은 메모리를 사용하여 Swift를 눌러버립니다. 작업을 수행하고 측정값을 기록하는 동안 페이지 뷰에서 페이지를 전환할 때 메모리가 급증하지 않는 것으로 나타났습니다. 문자 그대로 아무것도 바뀌지 않았습니다.

지도: React-Native는 Swift보다 61.11 MiB 적은 메모리를 사용하여 이 범주에서 큰 차이를 냈습니다. ‘Maps’ 탭을 눌러 MapView에서 현재 위치를 찾고 파란색 점으로 강조 표시하고 측정치를 기록하는 동안 메모리 사용량이 급증했습니다. 두 앱 모두 메모리는 작업이 진행되는 동안 계속 증가했지만 결국에는 스테이시스(안정화 상태)에 도달했습니다.

React-Native가 3개의 탭에서 승리했고 Swift가 1개를 획득했습니다. 전반적으로 React-Native는 61.96 MiB 만큼 메모리를 절약했으며 Memory 범주에서 우승했습니다. 한 가지 작업에만 집중하고 멈추는 대신 각 앱에서 더 많은 시간을 할애했다면 결과가 달라졌을 수 있습니다. “Maps” 탭(두 앱 모두)에서 지도를 축소하거나 지도를 이동할 때 메모리 사용량이 기하급수적으로 증가했다는 것을 알았습니다. 각각의 경우에 가장 많은 메모리가 사용된건 “Maps” 입니다.

결론

내가 Swift와 React-Native를 위해 만든 모바일 앱은 실제 모습이 거의 동일합니다. 네 개의 각 탭에 있는 작업 중에 앱의 CPU, GPU 및 메모리를 모두 측정하여 수집한 데이터에서 볼 수 있듯이 앱의 성능도 거의 동일합니다. Swift는 CPU 카테고리에서 우세했고, React-Native는 GPU 카테고리에서 겨우 승리했지만 Memory 카테고리에서 크게 이겼습니다. 이 데이터에서 Swift는 React-Native보다 효율적으로 iPhone의 CPU를 사용한다고 추측할 수 있습니다. React-Native는 iPhone의 GPU를 Swift보다 약간 더 효과적으로 사용하며 iPhone의 메모리를 아주 잘 활용합니다. Swift는 그렇지 않습니다. React-Native는 3개 카테고리 중 2개에서 우승하여 더 나은 실적을 올리는 플랫폼으로 Top을 차지했습니다.

제가 설명하지 않은 것은 Native Android입니다. 저에게는 iOS가 선호 플랫폼이고 가장 관심이 있는 부분입니다. 그러나 곧 Android 용으로 동일한 실험을 시도해 볼 수 있을 것입니다. 결과를 보진 않았지만 React-Native가 네이티브 iOS의 성능을 뛰어넘을 수 있었다면 네이티브 Android 성능도 능가할 수 있다고 생각합니다.

저는 지금보다 더 확신을 가지고 있습니다. React-Native는 미래의 프레임워크입니다. 그것은 많은 장점과 단점이 있습니다. React-Native는 Javascript(많은 개발자들이 이미 알고 있는 언어)로 작성할 수 있으며 코드베이스는 iOS와 Android 플랫폼 모두에 배포할 수 있고 더 빠르고 저렴하며 개발자는 사용자에게 직접 업데이트를 푸시하여 사용자 업데이트 다운로드에 대해 걱정할 필요가 없습니다. 무엇보다도 1년 만에 React-Native는 이미 네이티브 iOS(Swift) 앱보다 성능이 뛰어나게 되었습니다.

참고

Abed, Robbie. “Hybrid vs Native Mobile Apps — The Answer Is Clear.[하이브리드 vs 네이티브 모바일 앱 – 답은 명확합니다.]” Y Media Labs, 2016년 11월 10일, www.ymedialabs.com/hybrid-vs-native-mobile-apps-the-answer-clear/. 2016년 12월 5일.

M, 이고르. “IOS 애플리케이션 성능: Instruments 및 Beyond.” Medium, 2016년 2월 2일, medium.com/@mandrigin/ios-app-performance-instruments-bondond-48fe7b7cdf2#.6knqxp1gd. 2016년 12월 4일.

“React NAtive | React를 사용하여 네이티브 앱을 제작하기 위한 프레임워크” React Native, facebook.github.io/react-native/releases/next/. 2016년 12월 5일.

원문: https://medium.com/the-react-native-log/comparing-the-performance-between-native-ios-swift-and-react-native-7b5490d363e2#.33223bsrl