React Native 1장 : 걸음마

React Native

회사에서 갑작스럽게 리액트 네이티브 프로젝트에 지원투입이 확정되었다. MERN MEVN Flutter 이런 스택은 해봤는데 리액트 네이티브는 처음이다. 시간이 좀 남았으니 빠르게 익혀보고 간단한 프로젝트를 만들어봐야겠다.

 

자바스크립트와 리액트 기초문법에 대한 이해가 없다면 앞으로 지속되는 포스팅을 따라오지 못한다. 선행학습 하고오자.

 

그리고 크로스플랫폼 혹은 ios 앱 개발을 고려한다면 맘편하게 그냥 Mac 사라. MacOS 환경 이외에는 빌드 자체가 안된다. 필자도 2010년부터 삼엽충이었는데 Flutter 배우고 개발하면서 애플생태계로 모든 것을 싹 다 바꿨다. 물론 만족은 못함. 삼성이 서드파티도 그렇고 기본 기능도 더 많고 자유도도 훨씬 높음. 삼성이 애플 연동성 못따라간다는 건 옛말이다. 어쨌든 시작한다.

 

1장. 리액트 네이티브 첫걸음

- 리액트네이티브는 크로스플랫폼 프레임워크로, 리액트에서 사용하던 문법을 같거나 비슷하게(?) 사용하여 어플리케이션으로 빌드할 수 있도록 도와준다.

- 리액트는 JS 쓰레드에서, 브릿지를 통해 네이티브의 기능들을 호출하여 동작한다.

- 리액트 네이티브를 사용해 만든 프로젝트에는 JS Core라는 엔진이 탑재되어 있으며, 이 엔진을 통해 로직을 앱 내에서 실행해준다.

리액트네이티브의 성능이 구린 이유

- 퍼포먼스가 많이 구리다. flutter 보다 20배 이상 느린 알고리즘도 있다.

메모리 인텐시브 퍼포먼스 비교

CPU 인텐시브 퍼포먼스 비교

- 하지만 매우 강력한 장점이 있으니 바로 리액트의 코드를 재사용할 수 있기 때문에 생산성이 어마어마하게 높다는 것이다.

- 프로젝트의 규모가 거대하지 않거나 퍼포먼스 요구치가 낮은 경우 리액트네이티브는 최고의 선택이 될 수 있다.

- 리액트 네이티브에는 특별한 컴포넌트들이 내장되어 있는데, 이 컴포넌트들은 네이티브 환경에서 사용되는 컴포넌트들과 연동되어 있다.

- 예를 들면, Text컴포넌트 -> UIView(ios), TextView(Android) 이런식이다.

- 앱을 개발하는 과정 중에 특정 기능을 구현하기 위해 자바, Objective-C, Swift, Cotlin 등의 언어를 사용해야 하는 상황이 올 수도 있다.

 

2장. 설치지옥

- Mac 버전만 포스팅 한다. 어차피 구글링하면 안드로이드도 다 나옴. chatGPT한테 물어보던가 빙한테 물어보셈.

- nodeJS 설치한다.

- Homebrew 설치한다. 

  : brew.sh 에 접속한다 -> 터미널에 붙여넣기하라는거 한다 -> next Step 두줄 한줄씩 터미널에 넣어서 설치 끝낸다.

- JDK 설치한다.

  : 터미널에 javac -version 으로 버전을 체크해보면 된다. 

- watchman 설치한다. 

  : 터미널에 brew install watchman 입력한다. 이슈는 구글링해본다.

- 안드로이드스튜디오 설치한다.

  : Android SDK, Android SDK Platform, Performance (Intel XAXM), Android Virtual Device 골라서 커스텀으로 설치해준다. 

- 설치가 끝나고 Configure - SDK Manager를 열어 Android SDK Platform 최신버전 뭐 이런거 설치 하면 된다.

- 환경변수 설정하기 (Mac) 

  : $HOME/.zprofile 또는 $HOME/.zshrc 파일을 수정해 설정한다.

  : 터미널 열고 nano $HOME/.zprofile 엔터

  : 다 지우고

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

 

위에 5줄 복붙하고 ctrl+x -> y -> 엔터 이렇게 순서대로 누르면 된다.



- Xcode와 CocoaPods 설치하기

  : Xcode는 앱스토어에서, CocoaPods는 터미널에서 sudo gem install cocoapods 이거 입력해서 설치하면 된다.

 

3장. 드디어 연습프로젝트 만들기

- vsCode 열고 연습할 폴더 열고 터미널 열고

- npx react-native init LearnReactNative 엔터!

본가 리액트보다 이쁜데 ?

그러면 아래와 같은 디렉터리가 생긴다

뭐라는겨 진짜

 

- package.json에 scripts 옵션을 보면 이렇게 세팅되어있다.

뻔한 것

- 이렇게 세팅이 되면 yarn 을 통화 원하는 명령어를 실행할 수 있다.

- yarn android : 안드로이드 환경 앱 구동

- yarn ios : ios 환경 앱 구동

- yarn start : Metro를 구동하는 스크립트 (어차피 잘 안쓴다)

- Metro는 리액트네이티브를 위한 자바스크립트 번들러로, 프로젝트에 사용된 자바스크립트 파일을 모두 읽어서 올바른 순서로 하나의 파일로 합쳐주고 네이티브 앱에서 실행할 준비를 해준다.

 

이제야 세팅이 끝났다. 다음 포스팅에는 AndroidStudio로 직접 가상머신에다 구동을 해본다.

 

그립다 플러터.