React Native 개발 환경 셋팅하기 (안드로이드 스튜디오)

크게 2가지 방법으로 나뉘는데, 자세한 설치 방법은 공식 문서를 보면 친절하게 설명되어있다. 

 

원래는 expo 써서 간단하게 개발해보려 했으나, 실제로 배포하는 수준까지 앱을 개발하려고 하기 때문에 안드로이드 스튜디오를 설치하는 정석 방법으로 했다.

 

https://reactnative.dev/docs/environment-setup

Setting up the development environment · React Native

 

1. Node, JDK

Chocolatey를 설치하여 보다 쉽게 패키지를 다운받을 수 있게 설정하자. powershell을 관리자 권한으로 켜서 다음의 코드를 실행하여 필요한 Node와 JDK를 설치하자.

choco install -y nodejs-lts openjdk11

 

2. 안드로이드 개발 환경 셋팅

안드로이드 스튜디오를 설치하여 (https://developer.android.com/studio/index.html) 자세한 부분은 공식문서 그대로 따라갔다.

• Android SDK
• Android SDK Platform
• Android Virtual Device

이 3가지를 기본적으로 체크해준 뒤 설치했다.

 

3. Android SDK 설치

안드로이드 스튜디오는 가장 최신ㄴ 버전의 SDK를 기본으로 사용하나, React Native App은 Android 12 SDK버전을 필요로 한다. (현재 글 작성 날짜 기준 2022.8.2) 따라서 SDK manager를 켜서 추가로 설정해주자.

SDK Platform 탭에서 Android 12를 누른 뒤 Show Package Details를 체크하여 다음의 항목을 추가로 설치하자.

• Android SDK Platform 31
• Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

나는 Intel을 깔다가 에러가 나서 뒤의 Google API로 깔았다. 

 

SDK Tools 탭에서 역시 Show Package Details를 체크해준 뒤 Android SDK Build-Tools 항목에서 31.0.0을 체크한다. 모두 체크하였다면 Apply 버튼을 클릭하여 설치해주면 된다.

 

환경변수 설정

다음과 같이 환경변수를 잡아주었다.

환경변수 설정

그리고 Path에 체크된 주소를 추가했다.

가장 마지막 platform-tools 주소를 추가했다.

 

이제 기본적인 설치는 다 완료됬다!

 

npx react-native init AwesomeProject

 

리액트 프로젝트를 시작할 때처럼, 원하는 폴더명으로 리액트 네이티브 프로젝트를 시작하는 코드는 다음과 같다. 이제 이 프로젝트 안에서 물고뜯고 해보자. 

 

 

CLI를 사용하거나 Ignite를 사용하거나 Create-React-Native-App을 사용하는 여러 가지 방법이 있다.

ignite는 개발자가 공통적으로 많이 사용하는 요소들을 미리 다 셋팅해주는 간편한 기능이다. 이 방법을 통해 설치하면 package.json에 엄청 많은 코드가 추가되어있을 뿐만 아니라 기본 폴더들이 생성되어 있는걸 볼 수 있다.

긔록 CRNA는 create-react-app에서 영감을 받아 만들어진 요소로, 기본적인 설정을 대신해주지는 않지만 Expo SDK를 사용가능하게 해주는 강력한 기능이다!

 

아직 리액트 네이티브의 리액트까지만 감이 있는 나는 CLI를 써서 시작했다...ㅎㅎ