[ReactNative] 리액트 네이티브 시작하기 (개발 환경 셋팅)

 

 

리액트 네이티브란?

 

리액트와 앱 플랫폼의 기본 기능을 사용해 안드로이드 및 ios 애플리케이션을 빌드하기 위한 오픈 소스 프레임워크이다.

 

 

• 장점

1️⃣ Web view를 사용하는 다른 크롯 플랫폼과는 달리 실제 호스트 플랫폼의 표준 렌더링 API를 사용해 렌더링한다.

 

=> Web view를 사용하면 모방이 기본이기에 한계가 있다.

=> 그러나, 리액트 네이티브는 마크업 요소를 실제 네이티브 요소로 변환해서 사용한다.

 

2️⃣ 리액트와 대부분 비슷하기에 쉽다. (state, props가 변경되면 view를 렌더링하는 등)

 

=> 차이점 : 네이티브는 호스트 플랫폼의 UI 라이브러리를 활용해 이를 수행한다.

 

3️⃣ 대부분 비슷한 소스 코드로 ios, 안드로이드 모두를 위한 앱 개발이 가능하다.

 

=> 시간 절약 가능

 

 

core component	리액트에서 기본으로 제공하는 native component이다. 안드로이드 - image view, text view ios - uiimage view, uitext view
native component	런타임 시 리액트 네이티브는 해당 구성요소에 해당하는 안드로이드 및 ios view를 생성하며, 플랫폼 지원 구성요소를 native component라 한다. react component를 사용해 js로 view를 호출할 수 있다.

 

 

---

 

 

🔥🔥 개발 환경 셋팅하기

 

 

1️⃣ Expo

 

• what ? 무료로 사용하는 3rd party 서비스이다. 개발자가 리액트 네이티브를 쉽게 개발할 수 있도록 돕는다.
• 장점 ? 배포와 버전 업데이트가 쉽다. 안드로이드/x-code 없이 본인의 휴대폰으로 테스트가 가능하다. 설치와 개발 환경 설정이 간단하다.
• 단점 ? Expo에서 제공하는 기능만 사용할 수 있다. 모듈을 만들어서 사용하는 것은 불가능 하다. 간편하고 편리하지만, 복잡하고 섬세한 제어가 불가능하다.

 

 

2️⃣ 리액트 네이티브 CLI

 

• what ? 리액트 네이티브 팀에서 만들었다. Expo와 같은 tool을 사용하지 않는다. 리액트 네이티브만 이용해 개발한다.
• 장점 ? 네이티브 파일 및 모듈을 제작해 사용할 수 있다. 네이티브 소스 코드를 작성할 수 있다.
• 단점 ? Expo에 비해 편의성이 부족하다. 사용자가 기본 환경을 구성해야해서 오래걸린다. 안드로이드 스튜디오/x-code를 모두 설치해 빌드 후 배포해야한다.

 

 

728x90

 

 

 

2개의 방법 중 리액트 네이티브 CLI를 이용해 개발 환경을 셋팅해보겠다.

 

 

---

 

 

리액트 네이티브 개발 환경을 셋팅하기 위해 기본적으로 필요한 프로그램들이 있다.

 

1. git bash

2. node.js

3. vscode

4. 안드로이드 스튜디오

 

 

위 프로그램들을 모두 설치해준 후 본격적으로 환경을 설정해보겠다.

 

 

 

먼저 git과 git bash를 설치해주자.

아래 사이트에서 기기에 맞는 프로그램을 다운 받아주면 된다.

 

https://git-scm.com/downloads

Git - Downloads

 

 

+ git을 설치할 때 'add a git bash profile to window terminal' 부분을 체크하면 git bash가 윈도우 터미널에 추가된다.

 

 

 

다음으로 리액트 네이티브 CLI를 이용해 개발환경을 설정하려면 node.js가 필요하므로 아래 사이트에서 프로그램을 다운받아주자. (LTS를 다운받으면 된다.)

 

https://nodejs.org/en/download

Node.js — Download Node.js®

 

 

 

+ node.js를 설치하면서 Chocolatey를 설치하는 부분을 꼭 체크해서 같이 설치하는 것이 좋다.

+ node.js 설치를 확인하는 방법은 node --version을 터미널에 입력하면 된다.

 

 

node.js를 설치할 때 같이 설치했던 chocolatey를 이용해 JDK를 설치해주겠다.

+ 이때 터미널을 관리자 권한으로 실행해줘야한다.

 

 

choco install -y nodejs-lts openjdk11

 

위 명령어를 이용해 JDK를 설치해준 후 이제 안드로이드 스튜디오를 설치해야한다.

 

https://developer.android.com/studio?hl=ko

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

 

 

 

위 사이트에서 프로그램을 설치해주고 설치 시 'Android SDK', 'Android SDK Platform', 'Android Virtual Device' 3가지를 모두 체크해 설치해줘야한다.

 

 

설치가 완료되면 SDK 설정을 해줘야 하는데, 아래 사진에 나와있는 부분을 모두 체크해주면 된다.

 

안드로이드 스튜디오 SDK 설정

 

 

 

SDK까지 설정이 완료되면 환경변수를 구성해야한다.

 

 

1️⃣ 사용자 변수에서 'ANDROID_HOME' 을 추가해주고 경로는 SDK 경로를 적어주면 된다.

 

=> SDK 경로는 안드로이드 스튜디오 SDK 설정에서 확인할 수 있다. (위 사진에서 빨간 밑줄 친 부분에 경로가 적혀있다.)

 

+ 환경변수가 잘 등록되었는지 확인하는 방법은 터미널을 실행해준 후 아래 명령어를 실행하면 확인할 수 있다.

 Get-Childitem -Path Env:\ 

 

 

2️⃣ 사용자 변수의 'Path'에 들어가서 platform-tools 경로 추가를 해준다.

 

=> SDK 경로에 뒤에 '\platform-tools'만 추가해주면 된다.

 

+ 잘 등록되었는지 확인하기 위해서는 터미널에서 adb 명령어를 실행해보면 된다.

 

 

---

 

 

이제 리액트 네이티브를 개발할 기본 환경 구성은 끝났다.

 

 npx react-native init '생성할 폴더 이름' 

 

터미널에서 위의 명령어를 이용해 리액트 네이티브 앱 폴더를 생성해주면 된다.

 

 

 

나는 insta 앱을 클론 코딩해보기 위해 ReactNativeInstaApp이라는 폴더를 생성해줬다.

아래와 같은 화면이 뜬다면 성공한 것이다.

 

리액트 네이티브 앱 폴더 생성

 

 

 

 

다음 글에선 리액트 네이티브 빌드에 관한 글을 작성해보도록 하겠다.