하이브리드앱? React Native 알아보기

프로젝트를 급히 진행하면서 앱을 개발할 필요가 있었습니다. 시간이 촉박한 관계로 네이티브앱으로 개발하자니 개발 공수 및 인력 충원 등 시간과 비용이 많이 필요하겠죠. 결국 하이브리드 앱으로 개발하는 방향으로 결정하였습니다. 그런데...

# react native ?

하이브리드 앱을 개발하는 과정에서 개발 서버 구축 후 대락적인 마크업과 테스트 빌드까지 진행하였는데 개발 관련 레퍼런스 등을 찾아보는 과정에서 ionic 그리고 react native에 관한 글들이 많았습니다. 프로젝트에는 phonegap을 사용하고 있었는데 ionic 그리고 react native가 무엇인지 찾아보고 어떤 것으로 바꾸어야할 지 결정해야했죠. 물론 시간이 충분했기에 가능했습니다. 그리고 여러 관련 자료를 찾아보면서 react native로 구축하기로 최종 결정했습니다.

! Why react native

react native 급 우회... 변경하기로 선택한 이유는 몇 가지가 있는데 먼저 이 둘의 공통점과 차이점... 즉 뭐가 같고 뭐가 다른지 알아보겠습니다. 먼저 react native와 ionic 모두 native 개발 언어를 필요하지 않습니다. html, css, javascript 스킬만으로 앱을 만들 수 있기 때문이죠... 하지만 react native는 단순한 하이브리드 앱과는 전혀 다릅니다. 그 이유는 실제 네이티브로 개발되기 때문입니다.

! 네이티브로 개발, react native

하이브리드 앱은 결국 Webview에 지나지 않습니다. 즉 앱에서 브라우저가 앱처럼 보이도록 만들어 줄 뿐이죠... 하지만 react native는 실제 네이티브로 컴파일하여 빌드하는 방식입니다. 즉 네이티브와 동일한 앱을 만들 수 있죠... 여기까지만 보면 react native를 선택하지 않을 이유가 없습니다. 하지만 단점 역시 존재합니다.

# react native 장점 그리고 단점 알아보기

가장 궁금한 부분이죠. 장점 그리고 단점은 무엇일까요? 우선 앱의 선능, 퍼포먼스입니다. 단순한 웹뷰 방식이 아닌 네이티브로 구현되므로 네이티브에 가까운 퍼포먼스를 구현할 수 있습니다. 실제로 react native로 만들어진 수 많은 앱들이 이를 증명하죠. 다만 실제 네이티브 언어를 사용했을 때 개발 단계에서 가능한 퍼포먼스 성능 개선
... 최적화가 실제 네이티브와 비교하기는 어려울 것입니다. 복잡도가 더 할 수록 그렇겠죠. 하지만 이는 큰 차이는 아니므로 하이브리드앱과의 단순 비교를 한다면 성능에서 크게 차이를 비교하기 어렵습니다.

! react native는 어렵지만 개발하기 쉽다

어려운데 쉽다는 의미는 무엇일까요? 하이브리드앱은 기존의 웹 프론트 개발 방식으로 모든 개발이 가능합니다. 추가적인 앱 제어 방법만 필요하죠. 하지만 react native는 다릅니다. 우선 react라는 프론트엔드 프레임워크를 알아야하고 모른다하여도 배워야하겠죠. 프론트엔드 개발자가 아니라면 이를 배우고 이해하는데 꽤 많은 노력이 필요합니다.

하지만!! 쉽다고 얘기한 이유는 무엇일까요? 네이티브로 변환되는 특징 때문에 비교적 구조가 단순하고 복잡도가 낮아 이는 개발하기 쉽다는 뜻입니다. react native를 사용하는 앱 개발은 네이티브로의 변환을 위해 최소한의... 그리고 꼬 필요한 요소들로 구성되어있습니다. 사용에 필요한 내장객체와 기능들이 대부분 쉽고 빠르게 적용하여 사용하도록 만들어죠.(물론 복잡하고 난이도 높은 앱 개발에는 단점으로 적용학 수도 있습니다)

또한 각각의 요소들에 대하여 문서화가 잘되어 있습니다. 예를들어 이미지를 추가할 경우 간단하게 아래와 같이 <Image> 컴포넌트를 사용하면 됩니다. 어떤 컴포넌트가 내가 원하는 것인지 익숙해지면 그 다음부터는 훨씬 수월해집니다.

! react native의 단점

위와 같은 장점들은 매우 큰 요소입니다. 사실 네이티브로 만들 수 있다는 것만으로도 단점들을 커버할 수 있는 큰 매력입니다. 하지만 react native를 주저하게 만드는 단점들도 있는데 큰 이유들은 다음과 같습니다.


1. html, css, javascript만 알아서는 개발하기 어렵다
하아브리드 앱인 ionic이나 phonegap을 사용한다면 웹퍼블리셔나 UI개발자가 금세 새로운 앱을 만들 수 있습니다. 만약 이들에게 처음 만나는 react native로 앱을 만들게한다면? 개발에 필요한 시간은 몇 배로 늘어날 수 있습니다. 그 이유는 react를 이해해야하며 가장 큰 부분은 html, css와 비슷하지만 다른 언어를 사용하기 때문입니다. 물론 매우 비슷합니다. 하지만 아는 것과 비슷한 것을 아는 것은 엄청난 차이를 가져오게됩니다.


2. 커스텀 요소가 많을 수록 어렵다
다양한 컴포넌트 요소들을 react native에서 제공하고 있지만 원하는 모든 요구사항을 충족하기는 부족할 수 있습니다. 특히 커스터마이징이 높은 앱을 개발하는 경우가 여기에 해당하죠... 이런 이유로 단순하고 반복되는 컴포넌트가 많은 프로젝트에는 유리하지만 복잡하고 화려한 앱... 게임 같은 경우는 Native를 선택해야 할 것 같습니다.


이 외에도 몇 가지 고민되는 부분들이 존재하는데 예를들어 네이티브앱이지만 성능의 차이는 존재합니다. 이는 구조가 복잡할수록 두드러지며 큰 차이는 아니지만 인터렉션, 애니메이션 등의 효과가 많은 경우 더 크다 하겠죠.

또 다른 이유로 처음 접하면 어려울 수 있는 ES 6, JSX 등 잘 모르는 구조와 문법... 그리고 예문들이 관련 레퍼런스를 찾을 때 흔히 만나게 됩니다. 이 점 역시 react native를 처음 접하는 경우 주저하게 되는 이유 중 하나입니다. 선뜻 다가가기 어렵기 때문이죠...

# 마치면서

여기까지 react native를 빠르게 비교하고 알아보았습니다. 몇 가지 단점들이 존재하지만 최근들어 가장 빠르게 성장하는 언어 중 하나가 바로 react이고 react native입니다. 다른 언어에 비하여 쉽게 컴포넌트를 등록하거나 모듈을 사용할 수 있어 코드의 재사용성이 특히 높은 react native는 향후 가장 기대되는 라이브러리라고 생각합니다.