리액트 네이티브는 페이스 북이 공개한 iOS와 안드로이드 앱 개발을 위한 라이브러리입니다. 이 글에서는 리액트 네이티브를 통해 iOS 앱과 안드로이드 앱을 만드는 방법을 알아봅니다.
리액티브와 리액트 어느 것이 맞나요?
많은 사람들이 리액티브(Reactive)와 리액트(React)가 무엇인지 혼동합니다. 이름이 비슷해서 혼란스러울 수 있습니다. 하지만 이 둘은 자바와 자바스크립트만큼 이름만 비슷하고 실제로는 매우 다른 기술입니다. 이 둘의 차이를 이번 기회에 확실히 짚고 넘어갑시다.
리액트(React)는 페이스북이 웹 개발을 쉽게 하기 위해 만든 기술입니다. 커스텀 컴포넌트를 만들고 쉽게 조합해서 뷰를 손쉽게 만들 수 있습니다.
리액티브(Reactive)는 마이크로소프트가 창안한 개념으로 스트림과 비동기 처리등을 LINQ에 영향을 받은 방법으로 깔끔하게 처리할 있게 한 패러다임입니다. 리액티브는 ReactiveX(Rx)를 중심으로 여러 환경에 구현이 되어 있습니다.
넷플릭스가 주축이 되어 자바에 포팅한 RxJava와 사운드클라우드(SoundCloud)의 마티아스 캐플러(Matthias Käppler)와 안드로이드 씬의 영웅 스퀘어의 제이크 와튼(Jake Wharton) 중심이 된 RxAndroid, 깃헙(GitHub)과 페이스북(Facebook) 엔지니어들이 중심이 되어 이끌어 나가는 ReactiveCocoa가 유명합니다.
리액트 네이티브(React Native)는 리액트의 접근 방법을 모바일로 확장하는 페이스북의 오픈소스 프로젝트입니다.
기존의 모바일 자바스크립트 툴들이 웹뷰를 통해 인터페이스를 구축하는 하이브리드 방식이었다면 리액트 네이티브는 자바스크립트로 작업하지만 인터페이스는 네이티브 위젯으로 표시하는 방법입니다. 리액트 네이티브는 네이티브 UI를 통해서 이질감 없고 쾌적한 사용자 경험을 제공합니다.
누가 리액트 네이티브를 쓰나요?
리액트 네이티브는 iOS 버전의 페이스북 그룹, 안드로이드 버전의 Facebook Ads Manager, iOS 버전 등의 페이스북 앱에서 쓰고 있습니다. iOS 버전의 Ads Manager 앱의 경우에는 리액트 네이티브가 대중에 공개되기 이전에 이미 리액트 네이티브를 사용하고 있었습니다.
페이스북은 개발 중인 기술을 스스로 사용하는 일명 ‘개밥 먹기’(Eating your own dog food)에 능한 회사인데 페이스북 웹 자체는 리액트의 개발 버전인 0.15.0-alpha를 현재 사용하고 있습니다.
환경 설정을 합시다.
리액트 네이티브는 iOS 앱과 안드로이드 앱을 모두 자바스크립트 환경에서 네이티브로 개발할 수 있게 하는 환경이기 때문에 Node.js, iOS, 안드로이드를 위한 다양한 설정 과정이 필요합니다.
iOS 앱의 개발을 위해서는 OS X가 필수적입니다. 기술적으로 보자면 Android 앱의 개발은 플랫폼 독립적일 수 있지만 현재까지는 OS X 전용으로 개발되어 있습니다. 그렇기 때문에 리액트 네이티브로 앱을 개발하기 위해서는 맥 환경을 사용하셔야 합니다.
패키지 설치는 Homebrew를 통해 설치하는 것을 권장합니다. Homebrew가 설치된 후 아래의 커맨드로 watchman과 flow 패키지를 설치합니다. 전자는 변경 추적을 위한 것이며 후자는 자바스크립트 정적 분석을 위한 것입니다.
brew install watchman
brew install flow
Node.js는 4.0 이상의 버전이 필요합니다. 설치가 되어 있지 않다면 다양한 환경의 Node.js를 관리해주는 Nvm을 이용하도록 합시다. 개발 환경에 따라 다른 배포 버전을 선택할 수 있어 개발 환경을 독립적으로 관리하기에 유리합니다.
Node.js 환경 뿐만 아니라 다른 언어에서도 여러 개발 환경에 대응하기 위해 rbenv, pyenv 등의 개발 환경 관리 체제를 제공하고 있습니다.
brew install nvm
nvm install node
nvm alias default node
nvm을 설치하고나서는 별도로 해주어야 하는 작업이 있습니다. brew install nvm을 한 후에 나오는 메시지를 보고 따라해주세요.
이제 iOS와 안드로이드 개발 환경 설정을 설명합니다. 만약 iOS나 안드로이드 중 하나의 환경만 선호한다면 관심있는 플랫폼만 선택하셔도 됩니다.
iOS 개발 환경을 설정
Xcode를 설치합시다. XCode을 다운로드 받아서 설치하면 됩니다. iOS를 위한 개발 준비는 이것으로 끝입니다.
안드로이드 개발 환경 설정
먼저 최신 버전의 JDK를 설치하도록 합시다. Java의 최신 버전은 언어적인 변경 이외에도 Metaspace 등의 가상 머신 수준의 변경이 많아 더 향상된 개발 경험을 제공합니다.
Android SDK가 설치되어 있지 않다면 설치합시다. Android SDK와 네이티브 개발환경을 위한 Android NDK는 Homebrew 패키징이 있습니다. 안드로이드 스튜디오 등이 이미 설치되어 있다면 해당 패키지를 쓰시는 것이 좋습니다.
brew install android-sdk
설치가 완료되면 환경 변수 ANDROID_HOME을 설정합시다. 아래는 경로가 /usr/local/opt/android-sdk에 있다고 가정하고 있습니다. 다른 경로에 있다면 경로를 수정하시면 됩니다.
export ANDROID_HOME=/usr/local/opt/android-sdk
SDK를 처음 설치했다면 안드로이드 앱 개발에 필요한 부가적인 패키지를 설치해야 합니다. 커맨드라인에서 다음을 입력합니다.
android
설치해야할 패키지는 아래의 이미지로 다루겠습니다. 선택을 하고 설치를 누르고 필요에 따라 라이선스 동의를 누르면 됩니다.
안드로이드 자체 에물레이터가 지독하게 느리기 때문에 Genymotion을 설치합시다. 설치를 위해 VirtualBox가 필요합니다. 이 패키지는 Homebrew-Cask를 통해 설치하겠습니다.
brew install caskroom/cask/brew-cask
brew cask install virtualbox
설치가 완료되면 적절한 이미지를 생성합니다. 단 Preview 버전은 완성도가 낮기 때문에 정식 버전에서 선택하여 사용하는 것을 권장합니다.
시작하기
이제 본격적으로 리액트 네이티브를 시작해보겠습니다. 이전에 iOS와 안드로이드를 위한 설정 이외에 한가지 NPM 패키지를 더 설치해야 합니다. 해당 패키지를 설치하지 않아도 React Native 저장소의 소스코드를 이용해서 사용할 수 있지만 추천하는 방법은 아닙니다.
npm install -g react-native-cli
패키지를 설치했다면 이제 간단한 프로젝트를 만들어 봅시다.
react-native init AwesomeProject
iOS에서 앱을 수행하기
터미널에서 아래의 커맨드를 입력해서 Xcode를 수행합시다.
open AwesomeProject/ios/AwesomeProject.xcodeproj
Xcode가 뜨면 앱을 수행하기 위해 보통 앱을 실행하듯이 하면 되므로 매우 간단한 일입니다.
하지만 앱의 수정은 Xcode만으로 할 수 없습니다. 앱을 수정하려면 별도의 에디터에서 수정해야 합니다. 실제 코딩은 아래 index.android.js나 index.ios.js에서 이루어 져야하지만 Xcode는 그런 파일을 보여주지 않기 때문입니다.
어떤 파일을 수정하고 실행해야하는지 알 수 있습니다.
안드로이드에서 앱을 수행하기
안드로이드에서 수행하는 것은 IDE를 사용할 수 없습니다.
react-native run Android
수행이 완료되면 Genymotion을 켜두었으면 Genymotion에서, 실 단말을 연결해두었다면 실 단말로 앱이 수행되게 됩니다.
자바 스크립트 코드
리액트 네이티브가 어떻게 동작하는지 알기 위해 index.ios.js나 index.android.js 파일을 열어 봅시다. 두 자바스크립트 파일은 극도로 유사해서 한 파일만 보면 됩니다.
var AwesomeProject = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
});
React.createClass는 커스텀 컨트롤을 만드는 명령입니다. AwesomeProject라는 커스텀 컨트롤을 만든 것이지요.
여기에서 가장 중요한 것은 render 영역에 HTML과 흡사한 JSX 코드를 넣어 UI를 구성하게 됩니다. JSX는 페이스북이 만든 자바스크립트 확장인데 UI 코드를 태그의 형태로 코드 내에 포함시키게 해주는 확장입니다.
render의 내용을 살펴보면 View 태그가 최상위입니다. 최상위는 한가지 요소만 가지고 있어야 합니다. 그 밑에 3개의 Text 마크업이 포함되어 있는 것을 볼 수 있습니다. 해당 컴포넌트는 이미 리액트 네이티브가 준비하고 있는 것이며 네이티브 UI에 연결이 되어 있습니다.
스타일은 style={styles.instructions}와 같은 형식으로 되어 있습니다. 아래로 내려 보면 스타일이 정리된 영역이 있습니다.
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
styles.instructions에 해당하는 영역은 아래 영역입니다.
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
}
스타일에 관련한 내용은 직관적이라 쉽게 이해하고 사용하실 수 있습니다.
함께 쓰면 좋은 제품과 오픈소스 프로젝트
Realm 모바일 데이터베이스는 리액트 네이티브에서 사용할 수 있는 빠르고 간편한 객체형 데이터베이스입니다. 안드로이드와 iOS에서는 이미 널리 사용되고 있으며, 언제나 살아있는 객체로 최신의 데이터를 유지하면서 앱 모델 레이어를 정말 빠르게 작성하도록 도와줍니다. 리액트 네이티브 문서에서 단계별로 따라하면서 적용할 수 있습니다.
Realm 모바일 플랫폼은 더 나은 리액티브 앱 개발을 위해 백엔드 솔루션을 제공합니다. 특별히 관리하지 않아도 데이터가 실시간 동기화되므로 네트워크 연동을 위한 별도의 코딩을 하지 않아도 됩니다. 현재는 안드로이드와 iOS만을 지원하지만, 곧 리액트 네이티브를 지원한다고 하니 Realm 모바일 데이터베이스와 함께 연동하시면 시너지를 누릴 수 있을 겁니다.
네이티브 모듈을 작성하는 방법이 궁금한 분이라면 React Native : Native Modules를 방문해 보세요. iOS 캘린더 모듈 예제를 통해 자세한 튜토리얼을 볼 수 있습니다.
HackerNews-React-Native에서 해외에서 유명한 기술 미디어인 해커뉴스의 앱이 리액트 네이티브로 어떻게 작성됐는지 볼 수 있습니다.
다음으로
리액트 네이티브 환경설정을 하고 iOS와 안드로이드에서 어떻게 실행할 수 있는지를 보았습니다. 그리고 리액트 네이티브의 코드가 어떤 역할을 하는지도 알아보았습니다.
다음 연재에서는 네트워크에서 어떻게 데이터를 가져오는지 리스트 구조는 어떻게 표현하는지 등을 다루도록 하겠습니다. 아래 링크에서 보실 수 있습니다.
컨텐츠에 대하여
이 컨텐츠는 저자의 허가 하에 이곳에서 공유합니다.
