React native (리액트 네이티브) 초기설정하기

시작하기

react native 라이브러리를 이용하여 android, ios 크로스 네이티브 애플리케이션을 제작할 수 있습니다.
react native를 사용해보면서 느꼈던 장단점이 있습니다. 이 내용은 매우 주관적이므로 참고만 해주시길 바랍니다.

react native 장점

재활용

웹에서 사용한 react 나 자바스크립트로 작성한 로직 부분의 코드를 재활용할 수 있습니다.
ios와 android를 같은 방식으로 제작하기 때문에 손쉽습니다.

난이도

네이티브 앱개발에 필요한 러닝커브에 비해서 입문하는 난이도가 낮습니다. 웹 개발을 하던 사람들은 손쉽게 배울수 있습니다.
하지만 개발하면 할수록 점점 어려워집니다.

react native 단점

성능

자바스크립트 코드가 네이티브 브릿지를 통하기 때문에 네이티브 방식보다 성능이 떨어질 수 있습니다.

오류

react native에서 기능을 추가하기위해서는 외부 라이브러리를 사용해야합니다. 모든 앱에서 기본적으로 사용함에도 불과하고 navigation 만해도 외부 라이브러리를 이용해야합니다. splash의 경우도 마찬가지입니다. 그리고 외부 라이브러리에서 에러가 발생하면 수정 비용이 높습니다. 디버깅을 해도 오류를 찾기 어렵거나 무엇때문에 에러가 발생했는지 알지 못합니다. 외부 라이브러리가 업데이트 하면 서로 호환이 맞지 않아 에러가 발생할 가능성이 높습니다. 정리하자면 react native에서 에러가 나면 수정이나 디버깅이 번거롭다

설치하기

react native 사이트로 이동하면 설치 방법이 자세하게 나와 있습니다.

expo와 react native cli가 있는데 되도록 react native cli를 사용하도록 하겠습니다.
expo는 간단한 어플을 만들시에 유용할수 있으나, 커스터마이징이나 네이티브 코드를 직접적으로 적용하기 힘든 단점이 있습니다.
그래서 react native cli로 설치를 시작하겠습니다.

brew install node
brew install watchman

brew를 통해 node와 watchman을 설치해줍니다.
node를 이미 사용중이라면 watchman만 설치하도록 합니다.

IOS 설치

App Store에서 xcode를 설치하도록 합니다.
Xcode가 설치가 완료되었다면, Xcode 명령 도구(Command line tools)도 설치해야합니다. Xcode를 연 다음 Xcode 메뉴에서 Preferences를 선택합니다.

Locations패널로 이동하여 Command line tools드롭다운에서 최신버전을 선택하여 도구를 설치합니다.

Xcode에서 iOS 시뮬레이터 설치
시뮬레이터로 개발중인 애플리케이션을 가상으로 테스트해 볼 수 있습니다.
시뮬레이터를 설치하려면 Xcode > 환경설정을 열고 구성 요소 탭을 선택합니다.
사용하려는 해당 iOS 버전의 시뮬레이터를 선택합니다.

cocoaPods
CocoaPods는 Xcode 프로젝트의 라이브러리 종속성을 관리합니다.
npm과 흡사하게 Swift 및 Objective-C 의 종속성 관리자로 수만개 이상의 라이브러리가 있으며 다양한 용도로 활용할 수 있습니다.
CocoaPods는 Ruby로 빌드되었으며 macOS에서 사용 가능한 기본 Ruby로 설치할 수 있습니다. Ruby 버전 관리자를 사용할 수 있지만 수행중인 작업을 모르는 경우 macOS에서 사용 가능한 표준 Ruby를 사용하는 것이 좋습니다.
기본 Ruby 설치를 사용하려면 sudo gem을 설치할 때 사용해야 합니다. (하지만 이것은 gem 설치 기간 동안 만 발생합니다.)

sudo gem install cocoapods

Android 설치

brew install --cask adoptopenjdk/openjdk/adoptopenjdk11

시스템에 JDK를 이미 설치 한 경우 JDK 8 이상인지 확인합니다.

안드로이드 스튜디오를 설치합니다.

안드로이드 SDK 설치
Android Studio는 기본적으로 최신 Android SDK를 설치합니다.
그러나 네이티브 코드로 React Native 앱을 빌드하려면 Android (Q) 특히 SDK가 필요합니다.
Android Studio의 SDK 관리자를 통해 추가 Android SDK를 설치할 수 있습니다.

설치도중에 다음과 같은 보안설정이 나오면 좌측하단 잠금을 해제하고 설치를 허용해줍니다.

SDK 관리자는 Welcome to Android Studio화면에서 액세스 할 수 있습니다.

우측하단의 설정 아이콘을 클릭 한 다음 SDK Manager를 선택합니다.

SDK 관리자에서 SDK Platform탭을 선택한 다음 오른쪽 하단에서 Show Package Details옆의 확인란을 선택합니다.

Android 10 (Q)항목 을 찾아 확장 한 후 다음 항목이 선택되어 있는지 확인합니다.

• Android SDK Platform 29
• Intel x86 Atom_64 System Image 또는 Google APIs Intel x86 Atom System Image

Android SDK Build-Tools항목을 찾아 확장 한 다음 29.0.2선택되어 있는지 확인합니다.

마지막으로 OK를 클릭하여 Android SDK 및 관련 빌드 도구를 다운로드하고 설치를 완료합니다.

ANDROID_HOME 환경 변수구성

React Native 도구는 네이티브 코드로 앱을 빌드하기 위해 일부 환경 변수를 설정해야합니다.
현재 사용중인 터미널에 따라 다른파일에 입력 해주어야합니다.
$HOME/.bash_profile또는 $HOME/.zshrc구성 파일에 다음 행을 추가 합니다.

쉘에 따라서 다르게 설정해야합니다
자세한 사항은 쉘 관련 포스트를 참고해주세요.

// bash termenal을 사용시
vi ~/.bash_profile

// zsh termenal을 사용시
vi ~/.zshrc

vi 편집기로 bash_profile 을 연후에 i키를 입력후 다음을 붙여넣기합니다.

~/.bash_profile 또는 ~/.zshrc

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

마지막으로 esc키를 클릭한후 :wq로 파일을 저장합니다.

source ~/.bash_profile
또는
source ~/.zshrc

현재 쉘에 구성을 로드합니다.

애플리케이션 프로젝트 생성

길었던 기본 설치가 완료 되었습니다.
이제 프로젝트를 생성해보도록 하겠습니다.

npx react-native init ProjectName

--template인자를 이용해서 Typescript과 같은 사용자정의 react native 템플릿을 이용해서 프로젝트를 생성할 수 있습니다.

npx react-native init ProjectName --template react-native-template-typescript

애플리케이션 프로젝트 실행

IOS 실행

다음 명령어를 입력시 자동으로 시뮬레이터를 실행합니다.

cd ProjectName
npx react-native run-ios

Android 실행

android studio를 설치이후 에뮬레이터를 설정해주어야합니다.
Tools에서 AVD Manager로 들어갑니다.
그러면 다음과 같은 페이지가 나옵니다.


기기를 선택합니다. 이후 Recommended 에서 안드로이드 버전을 선택후 설치합니다.


기기 설정이 완료되었습니다.

기기를 한번 실행해주어야 프로젝트를 실행할 수 있습니다.
이제 애플리케이션 프로젝트를 실행해 보도록 하겠습니다.

cd ProjectName
npx react-native run-android

자세한 방법은 공식문서를 확인해주시길 바랍니다.

Android 실행시 에러 날경우

한 터미널에서 react-native start를 해주고, 열로고 하는 프로젝트에서 react-native android로 실행을 해주면 에러가 안나는 것을 확인할 수 있다.