React Native는 JavaScript와 React 기술을 이용하여 Native 앱을 개발할 수 있는 기술입니다.
Ionic 등의 하이브리드 앱은 앱 내부에 Web View를 이용하여 구현되는 방식이지만, React Native는 React와 JavaScript로 구성된 코드를 Mobile 환경에 맞춘 Native 코드로 전환해주는 것이기 때문에 성능상에서 우월하며, 기본적으로 제공되는 API를 거의 제한없이 사용할 수 있습니다.
또한 내부적인 구현이 React와 매우 흡사하기 때문에 기존의 React를 이용하여 front-end 개발을 해왔던 사람이라면 매우 간단하게 React Native 기술을 습득할 수 있고, 이를 이용하여 모바일 앱을 개발할 수 있습니다.
우선 React Native 개발자 페이지에 접속해보도록 합니다.
React Native
https://facebook.github.io/react-native/
페이지에 접속하면 Get Started가 보입니다.
메뉴에 접근하면 시작할 수 있는 방법이 두 가지가 있다는 것을 알 수 있습니다. 하나는 Expo를 사용하는 것이고 다른 한가지는 Native Code만으로 프로젝트를 생성하여 앱을 개발하는 것입니다.
만일 Expo를 사용하지 않는다면 React Native 개발에 필요한 여러 도구들을 직접 세팅해야한다는 불편함이 있습니다.
반면에 Expo를 이용하면 Node.js를 설치한 뒤 expo-cli만 준비된다면 매우 간단하게 프로젝트를 생성할 수 있으며, Xcode나 Android Studio를 사용하지 않고도 개발이 가능하다는 편리함이 있습니다.
Expo를 이용하여 앱을 개발하기로 마음먹으셨다면 아래의 링크를 이용하여 Node.js를 설치해주도록 합니다.
Node.js install
https://nodejs.org/en/download/
만일 Node.js가 정상적으로 설치되었다면, npm을 사용하실 수 있습니다.
아래의 명령어를 command line에 입력합니다.
입력하게되면 npm을 통해 expo-cli가 설치됩니다.
설치를 마친후에는 expo를 이용하여 직접 프로젝트를 생성합니다.
명령어는 expo init [project name] 으로 입력하면 됩니다.
아래는 개발자 페이지에 있는대로 AwesomeProject라는 프로젝트를 생성하는 명령어를 실행한 것입니다.
실행시에는 blank와 tabs 중 기본 template을 고를 수 있으며, 앱을 개발하는데 기본적인 Expo API만 사용할 것인지, 혹은 이에 더하여 custom 모듈을 사용할 것인지 선택할 수 있습니다. 마지막으로 앱의 이름까지 정해주고 나면, 프로젝트를 생성하기 시작합니다.
프로젝트가 정상적으로 생성되었다면 프로젝트 폴더에 접근하여 앱을 실행시켜줍니다.
프로그램이 정상적으로 시작하게되면, 화면에 커다란 QR 코드가 나오게 되는데 이를 앱 스토어에서 다운받은 Expo 앱을 이용하여 스캔하게 되면 기본적인 앱화면을 확인할 수 있습니다.
만일 QR코드를 스캔하기 힘든 상황이라면, 링크를 email이나 sms로 전달하여 앱을 테스트해볼 수도 있습니다. 이 모든 역할은 expo가 담당합니다.
이제 앱 개발을 위한 기본적인 준비는 완료되었습니다.
프로젝트는 사용하시기 편한 editor에서 로드하여 편집하시면 되는데 일반적으로 Visual Studio Code, Atom, Sublime Text 등을 많이 사용하는 편입니다.
Reference
React Native Docs
https://facebook.github.io/react-native/docs/getting-started
expo.io