JavaScript로 앱을 만드는 것만큼 훌륭한 일은 없습니다. 단, 모바일 앱을 만들 때가 아니라면요. JavaScript는 전통적으로 웹 앱 개발을 위한 언어였고, 이를 활용해 네이티브 모바일 앱을 만드는 것은 불가능한 일로 여겨졌습니다. 그래서 웹 개발자가 네이티브 모바일 앱 개발에 뛰어드는 것은 쉽지 않았고, Java나 Objective-C처럼 각 플랫폼에서 사용되는 프로그래밍 언어를 새로 배워야 했습니다.
그러다 Facebook(현 Meta)의 React Native가 이 장벽을 허물었습니다. React Native는 Android와 iOS 양쪽에서 동작하는 크로스 플랫폼 앱을 하나의 코드베이스로 개발할 수 있다는 강력한 장점을 제공합니다. React Native가 등장하기 전에는 Android용과 iOS용으로 코드를 두 번 작성해야 했지만, 이제는 더 이상 그럴 필요가 없습니다.
이 글은 React Native의 세계로 들어가는 첫걸음이 되어줄 입문 가이드입니다. 준비되셨나요? ?
왜 하필 React Native일까?
그렇다면 수많은 기술 중에서 왜 React Native여야 할까요? 다른 기술로는 얻기 어려운 다양한 이점을 제공하기 때문입니다. React Native로 할 수 있는 것들을 살펴보겠습니다.
진짜 네이티브 모바일 앱 개발
React Native는 JavaScript만으로 iOS와 Android 네이티브 앱을 작성할 수 있게 해줍니다. 제스처, 푸시 알림, 카메라, 위치 정보 같은 네이티브 컴포넌트도 모두 활용할 수 있습니다. Ionic이나 PhoneGap 같은 JavaScript 기반 모바일 앱 라이브러리도 있지만, 이들은 Webview에 의존하기 때문에 만들어지는 앱은 진정한 네이티브가 아닙니다.
iOS와 Android 동시 지원 크로스 플랫폼 개발
React Native의 가장 큰 매력은 하나의 앱이 iOS와 Android 양쪽에서 실행될 수 있다는 점입니다. Facebook이 React Native를 만들기 전에는 Swift나 Objective-C로 iOS 앱을, Java나 Kotlin으로 Android 앱을 따로따로 개발해야 했습니다. React Native는 이 문제를 해결해 한 번의 개발로 두 플랫폼 모두에서 동작하는 앱을 만들 수 있게 해줍니다. 정말 멋지지 않나요? ?
모든 코드를 JavaScript와 React로 작성
React Native 앱을 개발할 때 실제로 작성하는 것은 JavaScript입니다. React의 코드 스타일 덕분에 훌륭한 UI와 사용자 경험 컴포넌트를 손쉽게 구축할 수 있습니다.
React Native 시작하기
React Native를 처음 시작하는 것은 설렘과 동시에 약간의 혼란스러움이 함께 찾아옵니다. 첫 번째 단계는 설치인데, 방법은 여러 가지가 있습니다.
Expo CLI 사용하기
Expo CLI는 명령줄 도구로, React Native 보일러플레이트를 자동으로 다운로드하고 설치하며 Expo API와 통합됩니다. React Native 앱을 만드는 가장 쉬운 방법으로, 처음 시작하는 분들에게 권장되는 방식입니다.
Expo CLI는 다양한 옵션을 제공합니다. 별도의 설정 없이 모바일 기기에서 바로 앱을 실행하고 테스트할 수 있습니다. QR 코드만 스캔하면 Expo 모바일 앱으로 프로젝트가 열립니다. 또한 'Appetize'라는 웹 인터페이스를 통해 브라우저에서 다른 React Native 앱들도 탐색해볼 수 있습니다.
React Native CLI 사용하기
React Native CLI도 Expo CLI와 같은 역할을 하지만, 접근 방식과 추가적인 장점이 다릅니다. React Native CLI로 설치한 앱은 직접 네이티브 모듈을 만들 수 있는 옵션과 능력을 제공합니다. 네이티브 모듈을 작성하기 위해 애플리케이션을 eject(분리)할 필요가 없다는 것이죠.
플랫폼마다 React Native 앱을 개발하는 과정은 조금씩 다릅니다. 때로는 특정 플랫폼을 위한 별도의 설정이 필요합니다. 예를 들어 Android용으로 빌드하려면 Android SDK가 필요합니다. 지금부터 그 방법을 살펴보겠습니다!
안드로이드용 모바일 앱 빌드하기
Android 개발을 시작하려면 몇 가지 필수 요소를 설치해야 합니다. 먼저 Android SDK와 Android Studio를 다운로드하고 설정해야 합니다. 공식 사이트에서 다운로드할 수 있습니다.
Android Studio를 다운로드한 후에는 몇 가지 API를 추가로 설치해야 합니다. Android Studio를 열고 설정(Settings) 탭을 클릭하면 다음과 같은 창이 나타납니다.
먼저 SDK Platforms 탭에서 React Native가 지원하기 원하는 플랫폼(예: Android 6.0 Marshmallow)을 체크하세요. 그런 다음 SDK Tools 탭으로 전환합니다.
그리고 Android SDK Build-Tools, Android SDK tools, Google Play services를 체크합니다. Android SDK Build-Tools 아래에서는 다음 버전들의 플랫폼을 모두 선택하세요.
- 19.0.0 ~ 20.0.0
- 22.0.0 ~ 24.0.0
- 25.0.2, 26.0.1 ~ 26.0.3
- 27.0.3, 28.0.1 ~ 28.0.2
이제 SDK와 Android Studio 설정은 끝났습니다. 다음 단계는 에뮬레이터입니다. 에뮬레이터(또는 시뮬레이터)는 우리가 앱을 실행하고 테스트하는 공간입니다. 선택지는 다양합니다.
Android Studio 자체 에뮬레이터를 사용할 수도 있지만, 저는 개인적으로 Genymotion이나 실제 기기를 선호합니다.
Genymotion
Genymotion은 가상 에뮬레이터 환경을 제공하는 데스크톱 애플리케이션입니다. 속도가 빠르기 때문에 많이 사용합니다. ? 실제 기기에서 볼 수 있는 Wifi, 위치, 카메라 같은 기능을 갖춘 맞춤형 가상 폰을 생성할 수도 있습니다. Android Studio 에뮬레이터나 다른 어떤 에뮬레이터보다 Genymotion을 사용할 것을 강력히 추천합니다.
실제 기기 사용하기
앱을 실행하고 테스트하는 데는 무엇보다 실제 기기만한 것이 없습니다. 실제 기기에서는 내 애플리케이션이 실제로 어떻게 보이는지 확인할 수 있고, 가상 기기로는 느낄 수 없는 현실감을 경험할 수 있습니다. 사용할 수 있는 기기가 있다면 주저하지 말고 활용하세요.
여기까지 Android는 준비 완료입니다. 그렇다면 iOS는 어떨까요?
iOS용 React Native 앱 빌드하기
iOS에서 React Native를 실행하는 것은 Android와 크게 다르지 않습니다. Android에서 실행되던 동일한 React Native 앱이 몇 가지 예외 사항을 제외하고 iOS에서도 잘 동작합니다.
예를 들어 iOS 기기에서 실행하려면 macOS 환경이 필요합니다. 다행히 Android처럼 별도의 SDK 같은 추가 의존성을 다운로드할 필요는 없습니다.
에뮬레이터 관련해서는 Xcode가 훌륭한 시뮬레이터를 제공하므로 이를 활용해 React Native 앱을 테스트할 수 있습니다.
macOS에서는 iOS와 Android를 모두 실행할 수 있습니다. macOS에 Android Studio와 Genymotion을 설치하는 것도 물론 가능합니다. 반면 Windows PC에서는 Android 에뮬레이터만 실행할 수 있고 iOS 에뮬레이터는 실행할 수 없습니다. macOS를 가지고 계신 분이라면 정말 운이 좋은 겁니다. ? 즐기세요! ?
이제 React Native 앱을 개발할 환경이 모두 갖춰졌습니다. 그런데 React Native 코드는 어떻게 작성할까요? 생각보다 간단합니다. 실제로 React(React.js) 코드를 작성하게 됩니다.
공식 가이드를 참고해 React Native 연습을 시작해 보세요. 입문용으로는 "React Native YouTube Replica" 같은 튜토리얼을 추천합니다. 단계별로 첫 React Native 앱을 만들 수 있도록 안내해 줍니다.
좋습니다! 이제 여러분은 React Native로 코딩할 준비가 되었습니다. ? 하지만 코드의 오류를 점검·디버깅하고 로그를 확인해야겠죠. 그렇습니다, 로그요!! 그러니 디버거가 필요합니다. React Native에서는 어떻게 디버깅할까요?
React Native 디버깅하기
디버깅은 React Native뿐 아니라 모든 프로그래밍 언어에서 매우 중요합니다. React Native 코드에서도 무슨 일이 일어나고 있는지 파악해야 합니다. React Native 앱을 디버깅하는 방법은 여러 가지가 있습니다.
Chrome DevTools로 디버깅
React Native는 Chrome DevTools를 사용해 앱 로그를 확인하는 옵션을 제공합니다. 에뮬레이터에서 디버깅 모드를 활성화하려면 키보드에서 Ctrl + M(macOS는 Cmd + M)을 누르세요.
그러면 다음과 같은 화면이 나타납니다.
여기서 Debug JS Remotely를 선택하면 Google Chrome에서 https://localhost:8081/debugger-ui/ 주소의 탭이 열리고, Chrome DevTools로 디버깅할 수 있습니다. 그렇다면 다른 옵션도 있을까요?
React Native Debugger 사용하기
React Native Debugger는 React Native 코드를 디버깅하기 위한 훌륭한 도구입니다. 데스크톱 애플리케이션 형태로 다양한 장점을 제공하는데, Redux DevTools와 React DevTools가 통합되어 있고 스타일까지 디버깅할 수 있습니다. 사실상 React Native 최고의 디버거로, 저도 이것을 사용합니다. macOS, Windows, Linux에서 모두 사용할 수 있으니 설치 및 통합 가이드를 확인해 보세요.
여기까지가 React Native로 모바일 앱을 만들기 위한 완전 정복 가이드의 첫 번째 파트였습니다. 다음 파트에서는 네이티브 컴포넌트 활용법, React Native API, 다른 라이브러리와의 통합, Redux, GraphQL 등 더 깊이 있는 기술적 팁과 이슈들을 다룰 예정입니다. 다음 편 소식을 놓치지 않으려면 메일 리스트를 구독해 주세요. 읽어주셔서 감사합니다! ?