React Native를 사용하는 이유 (장단점)

React Native

React Native는 React를 만든 페이스북이 만든 모바일 앱 개발을 위한 JavaScript 기반 프레임워크다. React와 React Native의 가장 큰 차이점은 React는 JavaScript 라이브러리 이지만, React Native는 프레임워크라는 점이다.

React는 JavaScript 라이브러리 이므로 JavaScript를 쓰는 느낌에 더 가깝다면, React Native는 만들어진 프레임을 가져다 쓰는 느낌에 가깝다. 그러나 이 둘의 근본은 같아서 React를 어느정도 사용해본 사람들은 금방 React Native도 익숙해질 수 있다.

React Native는 HTML이나 CSS를 사용하지 않는다. 그 대신 JavaScript 쓰레드로부터의 메시지를 사용하여 네이티브 뷰를 조작한다. 

- Hello World 예시

import React from 'react';
import { AppRegistry, Text } from 'react-native';

const HelloWorldApp = () => <Text>Hello world!</Text>;
export default HelloWorldApp;

// Skip this line if using Create React Native App
AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);

// The React native code can also be imported from another component with the following code:
import HelloWorldApp from './HelloWorldApp';

React Native의 장점

- 크로스 플랫폼

React Native를 이용하면 기존 Native 앱 개발에 있어서 android는 Kotlin, ios는 Swift를 이용해서 따로 개발해야했던 반면에, 하나의 코드로 android와 ios를 둘 다 개발할 수 있다는 장점이 있다. 공식 버전 이외의 커뮤니티 버전을 사용하면, 윈도우, 우분투 등 다른 OS에서 작동하는 앱도 만들 수 있다. 

- 네이티브와 호환

기존의 크로스 플랫폼 앱 개발과 React Native의 가장 큰 차이점이자 장점은 HTML, CSS, JavaScript로 이루어진 웹뷰로 렌더링을 하는 것이 아니라 해당 플랫폼의 표준 렌더링 API를 사용한다는 점이다. React Native는 작성된 마크업을 플랫폼에 따라 그에 상응하는 진짜 네이티브 엘리먼트로 전환한다.

React Native의 리렌더링 갱신 주기는 React와 마찬가지로 props 혹은 state가 변경될 때 이다. 그러나 UI는 네이티브 엘리먼트 이므로, React를 이용하여 모바일 앱을 만들 수 있다.

- 낮은 러닝커브

React와 매우 유사하므로 React를 통한 웹 개발 경험이 있다면, 매우 쉽게 React Native를 익힐 수 있다. 그리고 Emulator를 이용하여 에러 메시지를 잘 표시해주기 때문에 개발 경험이 매우 좋다.

- Hot Reload

React Native는 좋은 성능의 Hot Reloading 기능을 제공하고 있다. 간혹 개발을 하다보면 iOS의 실기기를 연결해서 개발을 진행할 때 Hot Reload가 안 되는 경우가 있었는데, 원인을 찾지는 못했다. 그렇지만, Emulator나 안드로이드 실기기에서는 Hot Reloading 기능이 매우 잘 작동했다.

React Native의 단점

- React Native와 Native와의 간극

React Native는 대상 플랫폼의 네이티브 엘리먼트로 변환시켜주긴 하지만, 어쨌는 Native 앱은 아니기 때문에 React Native와 대상 플랫폼 사이에서 발생하는 문제의 디버깅은 매우 어렵다.

또한, 새로운 버전의 네이티브가 나왔을 때(예를 들어, 업데이트 된 안드로이드 버전에서 새로운 API 세트를 제공할 때) React Native에서 이를 지원해줄 때까지 시간이 걸린다. 그러므로, 사용목적에 따라 네이티브를 이용할 지 React Native를 이용할 지 결정해야 한다.

- 디버깅의 어려움

React Native는 매우 좋은 디버깅 기능을 제공하고 있지만 그것은 React Native 생명 주기와 관련된 내용이거나 JavaScript와 관련된 내용에 대해서고, 실제로 개발을 진행하면서 느낀 점은 네이티브 쪽과 관력된 사항에는 디버깅이 어려웠다. 예를 들어, 이전에 iOS나 안드로이드 개발을 해본 적이 없는 무지랭이 상태에서 카메라를 사용하는 앱을 개발하는데, 카메라 권한 동의를 받아야 한다는 사실을 몰라서 그냥 개발을 했더니 실기기에서 앱이 자꾸만 꺼지는 현상이 발생했다. 그러나 에러메시지가 나오지 않아서 원인을 찾는데 한참이 걸렸다. 그리고 카메라 화면에서 다른 탭 메뉴로 이동할 때, 카메라 화면에서 켜둔 플래시가 계속 켜져 있는 등 네이티브 쪽과 관련한 부분들을 잘 알고 있어야 디버깅이 가능했다.

- 아직 정식 버전이 출시되지 않았음

현재 이 글을 작성하고 있는 시점에 React Native의 최신 버전은 0.71이다. 정식 버전이 출시되지 않았더라도 간단한 앱을 만드는데 큰 무리가 없지만, 계속해서 버전이 올라가고 정식 버전 출시를 앞둔 상황이라 이전에 만들었던 앱의 버전을 올리는 작업이 추후에 요구될 수 있다. 버전을 올리는 과정에서 다른 라이브러리의 호환성 문제 등 신경 쓸 것이 많다.

- 애니메이션 구현의 어려움

React Native는 거의 모든 CSS 기능을 구현하려고 노력했지만, CSS 애니메이션 구현 툴인 keyframes 는 옮겨오지 못했다. 그래서 복잡한 애니메이션을 구현하려면 복잡한 과정이 요구된다.

- 다수의 플랫폼 검증

안드로이드와 iOS를 동시 개발하기 때문에 한 플랫폼에서는 구현이 가능한 것이 다른 플랫폼에서는 구현이 안 될 수 있다. 예를 들어, "iOS 쪽에서 이 기능을 사용하면 심사에 걸릴 것 같으니 이 기능은 제거하자", 혹은 동시 개발이 장점인데 결국 iOS와 안드로이드의 일부 기능을 따로 개발해야 할 수 있다. 그래서 React Native 개발자는 업무량이 많아질 수도 있다.

React Native를 사용하여 개발된 앱

1. Facebook

2. Instagram

3. Airbnb

4. Skype

5. Uber Eats

React Native를 사용하는 기업

1. Walmart

2. Microsoft

3. Meta

4. Tesla

5. Salesforce

6. Uber

7. Bloomberg

8. Airbnb

9. Shopify

10. Pinterest