React Native 소개와 장단점

by

React Native 란?

iOS와 안드로이드에서 모두 동작되는 하이브리드앱을 만들 수 있는 오픈소스 모바일 애플리케이션 프레임워크이다. 페이스북에서 개발하여 2015년에 발표하였다. 안드로이드의 Java/Kotlin과 iOS의 Objective-C, Swift 를 사용하지 않고 JavaScript와 React Library를 사용하여 개발이 가능하다. 또한 React를 사용해본 개발자라면 바로 React Native 개발이 가능하다. 초창기의 하이브리드 앱인 Cordova나 Ionic 처럼 웹뷰를 사용하는 것이 아니라 네이티브 엘리먼트로 전환 되어 실행되어 브라우저에서 제공하는 성능 이상의 구현이 가능하다.

동작방식

JavaScript코드를 이용하여 네이티브계층과 통신하는 브릿지를 사용한다. 브릿지는 JavaScript 스레드 정보를 받아 네이티브에 전달한다. React Native의 4가지 Thread의 종류를 설명하고 ,React Native앱이 실행되는 과정에 대해 알아보겠다.

Thread

  1. Main Thread
    • UI Thread
    • 안드로이드와 iOS의 UI랜더링에 사용된다.
  2. JavaScript(Background) Thread
    • JavaScript 로직이 실행되는 Thread
    • 네이티브 뷰에 대한 업데이트는 일괄 처리되어 JS Thread의 각 이벤트 루프가 끝날 때 네이티브 쪽으로 전송된다.
  3. Native Modules Thread
    • 플랫폼 API를 사용이 필요한 경우에 Native 모듈 쓰레드의 일부가 사용된다.
  4. Render Thread
    • 안드로이드 Lollipop(5.0) 에서만 UI를 그리는데 사용된다.

실행과정

  1. 앱을 처음 시작하면 Main Thread가 실행을 시작하고 JS번들을 로드하기 시작한다.
  2. JS코드가 성공적으로 로드되면 Main Thread는 이를 다른 JavaScript Thread로 보낸다.
  3. JS스레드가 실행되면서 React는 virtual DOM을 생성하고 diffing알고리즘을 통해 변경사항을 Native Bridge를 경유하여 shadow스레드로 전달한다.
  4. shadow스레드는 변경사항 메시지를 통해 화면의 레이아웃을 계산하고 계산이 끝난 레이아웃의 파라미터나 객체를 메인 스레드로 보낸다.
  5. 메인스레드가 UI를 화면에 표시한다.
  6. 사용자가 화면에 입력한 UI이벤트 정보들이 Native Bridge를 경유하여 JS스레드로 보내진다.
  7. UI이벤트 메시지를 활용하여 JS스레드에서 비즈니스 로직들이 실행되고 React는 다시 virtual DOM을 생성하며 변경사항을 다시 Native Bridge를 경유하여 shadow thread로 전달된다.

장단점

장점

  • 안드로이드와 iOS를 동시에 개발가능
    • JavaScrip기반의 React 문법만 익히면 안드로이드와 iOS 개발이 가능하다.
  • 핫리로드와 라이브 리로드 제공
    • 소스코드가 변경될 때 다시 빌드하지 않고 바로 수정된 부분을 확인하면서 개발이 가능하다.
  • 코드푸시 기능 제공
    • 코드푸시 기능을 사용하여 앱의 배포없이 변경된 소스 배포가 가능하다.
    • 앱을 스토어에 배포 시 바로 반영할 수 없고, 긴급한 버그 수정을 위한 배포 시 바로 사용자에게 적용할 수 있다.
  • 다양한 디버깅 제공
  • 소스코드 재사용과 생산성
    – React로 개발한 소스는 바로 재사용이 가능하다.
    – 웹 서비스를 실시할때에도 다시 React로 전환하기 쉽다.

단점

  • 네이티브 기능 개발 필요
    • JavaScript 기반의 언어를 사용하지만 실제 네이티브 소스 개발이 필요한 경우가 있다.
    • 결국 개발자는 안드로이드나 iOS개발 환경을 이해하고 어느정도의 소스 작성이 가능해야한다.
  • 일관성 없는 UI
    • 안드로이드와 iOS에서 동일한 화면이 표현되지 않아 별도의 스타일 작업이 필요할 때 가 있다.
  • 성능 저하
    • 네이티브앱에 비해 더 많은 CPU와 메모리 사용률을 보인다.
    • 간단한 화면을 표현하는 앱에서는 괜찮은데 애니메이션을 사용할 경우 차이가 심해진다.
  • 어려운 오류 찾기
    • 강령한 디버깅 툴을 제공하지만 에러가 나면 해당 에러를 찾아 해결하기 어렵다.
  • 써드파티 라이브러리
    • React Native에서 지원하지 않는 기능은 서드파티 라이브러리를 사용하여야 하는데 다양하지 않다
    • 써드파티 라이브러리의 완성도가 떨어진다. 그리고 품질이 iOS와 안드로이드에서 다르다.

개발환경

개발도구로는 크게 Expo와 React Native CLI가 있다. 많은 사용자들이 Expo를 사용하여 먼저 React Native를 경험해보고 익숙해진 다음에 React Native CLI를 사용하도록 권장하고 있다.

Expo

Expo CLI를 이용하면 빠르고 쉽게 개발할 수 있다. 클라우드에서 손쉽게 앱을 만들고 빌드하고 설치할 수 있다. 하지만 순수하게 자바스크립트 어플리케이션만 개발 가능하다. 빌드하는데 시간이 오래걸리고 앱의 크기가 크다.

React Native CLI

안드로이드 스튜디오 또는 XCode를 이용하여 개발하는 방법이다. 초기 환경을 구축하기 어렵고 시간이 오래 걸리지만 자유도가 높고 네이티브로 작성된 모듈을 사용할 수 있다. 또한 네이티브를 직접 개발하여 연동할 수 있다.

참조

리액트 네이티브 공식사이트

리디

Clint Jang

How React Native Works ?

위키피디아

Leave a Comment