[개발] React Native 앱 개발에 대해 알아보자.

안녕하세요 devport 입니다. 이번에 하이브리드 앱을 개발할 수 있는 프레임워크 중 하나인 React Native에 대해서 알아 보도록 하겠습니다. 제가 이번 React Native를 알아보는 이유는 WebView에 이미 개발된 웹 호스트를 올려 실제 앱처럼 동작할 수 있다는 부분을 이용하기 위해서 입니다. 아무래도 포스팅의 방향도 React Native의 다양한 컴포넌트를 사용하는 방향으로 작성되지 않을 것을 여러분은 참고해주시면서 읽어주셨으면 합니다.

 

React Native?

React Native는 페이스북에서 개발 되었으며 오픈소스 모바일 애플리케이션 프레임워크 입니다. Android, IOS 등의 애플리케이션을 개발하기 위해서 사용되고 있으며 네이티브 플랫폼과 리액트라는 요소를 사용할 수 있다는 특징을 가지고 있는 프레임 워크 입니다.

WebView

webview는 Android, ios에서 모두 제공하는 컴포넌트 입니다. webview는 웹 애플리케이션 또는 웹페이지만 클라이언트 애플리케이션의 일부로 제공하려고 하는 경우에 사용되고 있습니다. 이 WebView에 url을 입력하면 url 컨텐츠가 출력됩니다. 저는 WebView에 앱의 Url을 입력하여 앱을 개발할 생각을 가지고 있습니다.

 

Expo

여러분이 React Native로 개발을 진행할 때 개발모드, 빌드등의 환경을 구축하려고 한다면 쉽지 않을 것입니다. 하지만 쉽도록 도와주는 프레임워크가 있습니다. 그 프레임워크는 Expo이며 간단한 명령어로 개발, Android, IOS 빌드를 수행하게 되어 Xcode, Android Studio의 필요성이 사라지게 되죠. 또한 실시간으로 개발을 진행하며 핸드폰으로 결과물을 확인해볼 수도 있습니다. 제가 이번 React-Native를 공부를 하게된 이유도 Expo 프레임워크를 사용하기 위해서입니다.

간단한 앱개발 환경을 빠르게 구축할 수 있기 때문에 간단한 하이브리드 앱 개발을 개발 하신다는 분들에게 추천해드리고 싶습니다. 

 

하지만 expo를 사용하기전에 고려할 사항이 많다고 합니다. 무엇이 있을까요?

• 빌드파일의 크기가 React-Native 보다 큽니다. (아무것도 설치 하지 않아도 46mb 이상...)
• 네이티브 모듈을 사용하고 가져올 수 없으며 expo에서 제공하는 API만 이용이 가능 (직접 모듈 제작 불가능)
• Bluetooth, WebRTC 등 일부 기능 지원 안함
• ...

expo는 위 사항 뿐만 아니라 좀 더 많은 제한 사항을 가지고 있습니다. 참고 하시는 분들은 expo 제한 문서를 참고해주세요. 위 사항을 무시하고 expo로 개발 후 기능에 제한으로 인하여 Rollback 하는 케이스의 기술 포스팅들이 굉장히 많았습니다. 단점을 극복할 정도로 사용할 만 하다고 판단 될시에만 expo 프로젝트를 생성하는 것이 좋을 것 같습니다.

 

React Native + Expo환경 구축

react-native + expo 프로젝트를 생성하기 위해서는 expo-cli를 우선 설치해야합니다.

npm install -g expo-cli

설치가 완료되었다면 쉘에서 CLI가 정상적으로 설치가 되었는지 확인해봅니다.

expo --version

설치된 cli로 react-native 프로젝트를 생성합니다. 저는 testApp 프로젝트를 생성하여 보겠습니다.

expo init testApp

 

생성 명령어를 실행하게되면 _black를 선택하고 진행합니다.

저는 기존 웹사이트를 Webview 형식으로 보여줄 생각이므로 expo 웹뷰 모듈을 우선 설치합니다.

expo install react-native-webview

설치가되었다면 webview의 문서의 예제를 그대로 복사하여 App.js를 변경해줍니다.

import * as React from 'react';
import { WebView } from 'react-native-webview';

export default class App extends React.Component {
  render() {
    return <WebView source={{ uri: 'https://www.naver.com' }} style={{ marginTop: 20 }} />;
  }
}

'https://www.naver.com' 위치에 적용하고자 하는 사이트의 uri로 변경하게되면 끝입니다. 간단하죠?

예를들어 네이버(https://www.naver.com)의 uri을 넣게 되면 앱을 실행시에 네이버 화면을 출력하게 됩니다.

이제 준비도 끝났겟다 expo를 실행해보도록 하겠습니다.

expo start

서버를 실행하게되면

 

QR코드를 출력하여 줍니다. 이걸 어디에 쓰냐 하면 안드로이드의 expo, IOS의 expo-client 앱을 자신이 사용하는 기종에 맞춰 설치합니다. 안드로이드는 앱을 통해 아이폰은 카메라 앱으로 QR 코드를 인식하면 본 프로젝트의 App이 실행 됩니다.

 

이렇게 간단하게 웹뷰로 하이브리드앱을 개발하였습니다. expo를 이용한 빌드는 다음 포스트로 작성해보도록 하겠습니다. react-native로 집중해서 개발을 하지는 못했지만 이렇게 간단하게 웹뷰 형식의 앱을 개발하기에는 expo 프레임워크 만한 것이 없다는게 저의 개인적인 생각입니다.