[React Native] 리액트 네이티브란? 장단점

Front-End, Application 개발을 하는 분들이라면 한 번쯤 리액트 네이티브(React Native)라는 단어를 한 번쯤은 들어보셨죠? 페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임워크로 Javascript를 알고 있는 개발자라면 안드로이드, IOS 앱을 만들 수 있는 크로스 플랫폼 (하이브리드 플랫폼)입니다.

이 페이지는 리액트 네이티브에 대해 알아보고 장단점을 적어보려고 합니다.

1. 리액트 네이티브란?

리액트 네이티브는 페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임워크입니다. JavaScript로 개발이 가능하며 하나의 프로그래밍 언어로 IOS와 안드로이드 모바일 앱을 동시에 개발할 수 있는 크로스 플랫폼입니다.

애플리케이션을 개발한다고 한다면 Android는 Kotlin과 Java가 대표적이고 IOS는 Objective-C와 Swift로 개발하는 것이 일반적입니다. 이 일반적인 언어들로 개발하는 것은 각각의 OS에 최적화되어 있습니다.

하지만 각각의 언어로 개발하기 위해선 개발자들은 두 가지 언어와 OS를 모두 이해해야 합니다. 개발자도 필요하고 유지보수하는 비용도 많아지죠. 그래서 이를 해결하기 위해 등장한 것이 하이브리드 웹앱입니다.

웹을 구동하면 앱 화면은 웹(Web) 화면으로 표시하고 필요한 기능 웹 기술로 구현합니다. 초창기 하이브리브 웹 기술은 브라우저를 사용했기 때문에 브라우저에서 제공하는 성능 이상으로는 발휘할 수 없었습니다. 이를 보안하려는 시도가 나타났고 2015년 5월 페이스북은 웹 브라우저를 사용하지 않고 네이티브 브릿지(Native Bridge)를 사용하는 리액트 네이티브를 발표합니다.

리액트 네이티브는 네이티브 브릿지를 통해 네이티브 스레드(Native Thread)와 통신하면서 웹앱과 다르게 성능을 최적화시킵니다. 이런 웹을 사용하지 않고 네이티브와 통신하는 방법을 사용하는 것을 하이브리드 앱(Hybrid App)이라 블리며 자마린, 네이티브 스크립트, 플루터 등이 있습니다.

2. 리액트 네이티브의 장점

2.1 러닝 커브가 낮다.

리액트 네이티브의 가장 큰 장점이라고 할 수 있는 것은 앱을 만들기 위해 다른 언어를 학습하지 않아도 된다는 것입니다. 물론 JavaScript를 사용하지 않는 개발자라면 이야기는 다르지만 Front-End 개발자, Back-End Node 개발자 라면 바로 앱 개발을 할 수 있습니다.

JavaScript 기반으로 하기에 다른 하이브리드 앱인 자만리-C#, 플루터-Dart 보다 러닝 커브와 진입 장벽이 낮습니다.

2.2 소스 코드 재사용과 생산성.

페이스북의 리액트에서 파생되었기 때문에 그 방식을 그대로 사용했습니다. React는 Component 기반으로 기능들을 분리해 재사용할 수 있는 구조로 되어 있습니다. 또한 기존에 리액트로 개발된 사이트가 있다면 그 사이트의 Component 코드를 그대로 사용할 수 있기 때문에 재사용 가능하면 생산성은 더욱 올라갑니다.

또한 하이브리드 앱의 특징으로 두 개의 OS인 Android와 IOS 모두 한 번에 개발할 수 있기 때문에 개발을 효율적으로 할 수 있습니다.

2.3 비용 그리고 오픈소스

하나의 언어 그리고 하나의 코드로 두 개의 OS 앱을 개발할 수 있기 때문에 일반적인 네이티브 앱을 개발하는 것보다 두배 비용이 저렴하게 듭니다. 또한 기존에 JavaScript를 사용하는 개발자들이 많기 때문에 개발자들을 고용하는데도 좋고 쉽게 배울 수 있습니다.

또한 앱의 유지보수에도 하나의 코드만 수정하면 되기에 유지 보수 비용도 줄어듭니다.

리액트 네이티브는 오픈 소스로 커뮤니티가 활성화되어 있고 많은 블로그에서 정보를 찾아볼 수 있습니다. 오픈 소스의 장점으로 문제 해결하는 데 참고 자료가 많이 있어 생산성을 증대시키고 비용을 절약할 수 있습니다.

3. 리액트 네이티브의 단점

3.1 러닝 커브

러닝 커브는 장점이자 단점입니다. 기존에 OS 네이티브 앱을 개발하던 개발자는 새로운 JavaScript를 학습해야 합니다. 그리고 리액트를 접하지 않았던 개발자들은 새로운 개념인 jsx의 리액트 고유 방식을 이해하고 리액트가 사용하는 props, state 등의 개발 방식을 이해해야 합니다.

3.2 네이티브 보다 성능이 떨어진다.

리액트 네이티브는 네이티브 브릿지를 사용하여 네이티브 스레드를 연결시켜 동작하는 하이브리드 앱이기 때문에 네티이브 개발 방식보다는 당연하게 성능이 떨어집니다.
일반적인 애플리케이션을 만든다고 한다면 문제는 없지만 애니메이션 60 프레임 이상을 사용하거나 자바스크립트 스레드에서 5ms보다 시간이 걸리는 처리를 하게 된다면 성능 저하를 경험할 수 있습니다.

3.3 오픈 소스 그리고 네이티브 기능 개발

오픈 소스이기 때문에 업데이트가 자주 발생합니다. 또한 업데이트 시 수정되는 기능들 때문에 버그가 발생할 수 도 있습니다. 버전을 업그레이드는 출시되자마자 진행하지 않아도 되지만 이는 항상 생각하고 업그레이드를 진행해야 합니다.

또한 네이티브 기능을 개발하기 위해서는 리액트 네이티브에서 기능을 제공해야 합니다. 물론 기본적인 기능들을 제공되고 있지만 신규 기능을 개발하기 위해서는 리액트 네이티브가 지원해주어야 가능합니다.

네이티브의 기능을 연결하는 가이드는 제공하고 있지만 개발은 쉽지 않고 네이티브 지식을 요구하기 때문에 네이트브 언어를 공부하는 것과 같을 수 있습니다.

참고 도서

스무디 한잔 마시며 끝내는 React Native