React Native 시작하기

참고: React Native Website

이 글에서는 React Native CLI를 사용하여 Android 개발 환경을 구축합니다. Expo는 사용하지 않습니다. (오래 전에 Windows에서 Expo를 이용한 개발이 힘들어서 중단했던 기억이 있는데, 요즘은 어떨지 모르겠습니다.)

개요

React Native 홈페이지에서 React Native CLI Quickstart 탭을 선택하고, 다음 사항을 선택합니다.

Development OS: Windows
Target OS: Android

준비 사항

우선 Node.js, JDK 11, Android Studio 등을 설치해야 합니다. Android Studio를 설치하면 JDK 11이 자동으로 설치되니, JDK를 별도로 설치할 필요는 없습니다.

SDK Platforms and Tools

안드로이드 스튜디오를 통해 SDK 도구들이 설치되어 있어야 합니다. 안드로이드 스튜디오에서 왼쪽 상단 메뉴 'File > Settings'를 선택하여 설정 창을 엽니다. 설정 창 왼쪽 메뉴에서 'Appearance & Behavior > System Settings > Android SDK'로 갑니다.

설정 창 중앙에서 SDK Platforms / SDK Tools / SDK Update Sites를 선택할 수 있습니다.

• SDK Platforms에서 플랫폼이 최소 1개 이상 설치되어 있어야 합니다.
• SDK Tools에서 다음 사항이 반드시 설치되어 있어야 합니다.

1. Android SDK Build Tools
2. Android Emulator
3. Android SDK Platform Tools
4. 자신의 컴퓨터 CPU가 인텔인 경우 Intel x86 Emulator Accelerator (HAXM installer), AMD인 경우 Android Emulator Hypervisor Driver for AMD Processors (installer)
5. 각 에뮬레이터 가속기를 사용하려면 컴퓨터에서 가상화를 지원해야 합니다. 가상화를 활성화하는 방법에 대해서는 여기를 참조하세요.

• 설치를 확인했다면 같은 화면 바로 위에서 Android SDK Location을 확인합니다. 대부분 다음과 같을 것입니다. 'C:\Users[컴퓨터 계정]\AppData\Local\Android\Sdk' 이 주소를 복사해서 윈도 탐색기 주소창에 붙여넣기하고 해당 폴더로 이동합니다.
• 설정 창에서 'Build, Execution, Deployment > Build Tools > Gradle'로 이동합니다. 오른쪽 'Gradle' 섹션에 'Gradle JDK' 항목이 있을 겁니다. 이 항목의 값이 version 11로 설정되어 있는지 확인합니다.

adb 패스 설정

에뮬레이터 기기를 구동하려면 adb를 어느 폴더에서든 실행할 수 있어야 합니다. 윈도우 터미널을 열고 'adb' 또는 'adb --version'을 입력해 봅니다. 반응이 있다면 됐습니다. 만약 "'adb'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다."라는 오류 메시지가 출력된다면, 패스를 설정해야 합니다.

윈도우 '설정' 앱을 열고 '시스템'을 선택합니다. '시스템'의 왼쪽 메뉴 맨 아래의 '정보'를 선택합니다. 이 화면에서 오른쪽을 보면 '관련 설정'이 있고 여러 항목 중에 '고급 시스템 설정'이 있습니다. '고급 시스템 설정'을 선택합니다.

뜨는 창에서 '환경 변수...'를 선택합니다. '사용자 변수'와 '시스템 변수'를 설정할 수 있는 창이 뜹니다. 선택은 자유지만 계정과 상관없이 환경을 구축하려면 '시스템 변수'에서 'Path'를 선택하고 '편집'을 선택합니다.

윈도 탐색기를 확인합니다. 아까 'C:\Users[컴퓨터 계정]\AppData\Local\Android\Sdk'으로 이동했었죠? 여기서 'platform-tools' 폴더로 들어갑니다. 그러면 'adb' 파일이 보일 겁니다. 이제 이 폴더 주소를 복사해야 합니다. 윈도 탐색기 주소창에서 주소를 그대로 복사합니다. 주소는 아마 다음과 비슷할 것입니다. 'C:\Users[컴퓨터 계정]\AppData\Local\Android\Sdk\platform-tools'

아까 선택한 '시스템 변수 > Path > 편집'에서 오른쪽의 '새로 만들기'를 클릭하고, 방금 복사한 주소를 붙여넣기합니다. '확인'을 선택합니다.

한 가지 더 확인할 사항이 있습니다. '시스템 변수'의 'Path' 위쪽으로 'JAVA_HOME' 변수가 보일 것입니다. 이 변수의 값을 두 번 클릭하여 해당 주소를 확인합니다. 아마 다음과 같을 것입니다. 'C:\Program Files\Android\Android Studio\jre' 만약 'JAVA_HOME' 변수가 없다면 만들어 주어야 합니다. '새로 만들기'를 클릭하고 '변수'에는 JAVA_HOME'을, '값'에는 'C:\Program Files\Android\Android Studio\jre'를 설정합니다. (해당 주소가 존재하는지는 직접 확인해 보세요.)

그러면 됐습니다. 모든 설정이 완료되었습니다.

npx로 프로젝트 설치하기

이제 터미널에서 CLI를 실행합니다. 만약 react-native-cli가 global로 설치되어 있다면, react native 홈페이지에서는 global 버전을 삭제할 것을 권장합니다. npx로 프로젝트를 설치해 개발하는 것을 권장합니다.

터미널에서 react native 프로젝트를 모아 둘 폴더에 들어가 다음과 같이 입력합니다. (프로젝트 이름이 'AwesomeProject'이니, 해당 이름은 원하는 대로 변경해도 됩니다.)

npx react-native init AwesomeProject

앱 실행하기

프로젝트 설치가 완료되면 다음과 같이 3단계에 걸쳐 앱을 실행합니다.

1. 안드로이드 스튜디오를 실행합니다. 프로젝트를 선택할 때, 'AwesomeProject > android' 폴더를 선택하여 프로젝트를 엽니다. 'Device Manager'에서 virtual device(가상 기기) 1개를 실행하여 전원을 켭니다. 아직 생성된 가상 기기가 없다면 1개를 생성하여 실행합니다. 실행할 때, '앱 실행'을 선택하기보다는 Device Manager에서 가상 기기를 자체 실행하는 편이 낫습니다. '앱 실행'을 하면 현재는 오류가 나기 때문입니다.

2. 가상 기기가 켜졌다면, 터미널을 실행하고 다음과 같이 입력합니다.

npx react-native start

그러면 Metro가 실행됩니다. Metro는 자바스크립트 번들러입니다. Metro는 "진입 파일과 다양한 옵션을 받아들인 후, 모든 코드와 의존 사항을 포함한 단 1개의 자바스크립트 파일을 반환"합니다. (Metro Docs)

3. Metro가 실행된 후 해당 터미널은 더 이상 사용할 수가 없으므로, 터미널을 새로 1개 더 엽니다. 새로 연 터미널에서 다음과 같이 입력합니다.

npx react-native run-android

잠시 후 가상 기기에 앱이 열릴 것입니다.

앱 코드 수정하기

자바스크립트(리액트) 파일을 수정할 수 있는 IDE 또는 편집기를 열고, 루트 폴더의 App.js 파일을 수정한 후 가상 기기를 확인해 보세요. Metro 터미널의 'r'을 눌러 reload하지 않아도 자동으로 앱이 갱신되는 모습을 확인할 수 있습니다.