[RN] React Native 시작하기

이 글은 인프런 강의를 듣고 정리하여 작성된 내용입니다.

안녕-하요(?)! 민디입니다 🤭
오늘은 React Native 에 대한 이야기를 한번 해볼까 합니다!
본문에서는 React Native 의 기본적인 개념과 원리, 환경 세팅에 대한 이야기를 하려고 합니다!

제 컴퓨터 사양에 맞춰진 터라 혹시나 여러분의 환경에서는 제대로 동작하지 않을 수 있다는 점...
근데 제 생각에는 대부분 다 버전 문제라서, 혹시나 문제가 생긴다면 버전을 잘 들여다보십쇼!
그럼 시작해보겠습니다 가보자구리! 👊

React Native 란?

네이티브 앱을 제작하기 위한 오픈 소스 프레임워크이며, 자바스크립트와 리액트 기반입니다!
그렇기 때문에 자바스크립트와 리액트에 대한 지식이 필요하죠.

또한 크로스 플랫폼이며, iOS, Android 를 동일하게 동작할 수 있도록 해주는 API 입니다.
React Native 는 진입 장벽이 낮으며 이해하기가 쉬우나, 위에서 이야기했듯이 HTML, CSS, JS, ES6, React 등 많은 선수 지식이 필요합니다. (근데 진입 장벽이 낮다고..?)

React Native 기본 원리

React Native 는 앱을 빌드할 때 앱의 전체 로직을 가지고 있는 JS Bundle 을 만들고 각 플랫폼에 실어줍니다.

JS Bundle 은 JS Thread 에 의해 실행되며, 각 플랫폼에서 앱을 실행하기 위한 Native Threads 가 있습니다.
이 때 JS Bundle 은 Native Threads 와 직접 커뮤니케이션을 할 수 없기 때문에, React Native 의 Bridge 를 이용하여 커뮤니케이션을 합니다.

JS Bundle 을 만드는 방법에는 두 가지가 있는데 바로 Expo CLI 와 React Native CLI 입니다.
그렇다면 두 개의 차이점은 무엇일까요?

Expo CLI vs React Native CLI

React Native 을 처음 시작하거나 또는 단순 학습할 경우에는 Expo 를 많이 이용합니다. Expo 는 개발 환경 구축이 용이하고, 실제 개발이 쉽고 편하기 때문입니다.

그러나 OS Layer 와 직접 상호 작용이 불가능하고, Expo 에서 제공해주는 모듈만 사용이 가능하다는 제약이 있습니다.

또한 Expo Client 라는 Expo 에서 제공해주는 앱에서는 잘 작동하나, 시뮬레이터 및 실제 단말기에서는 잘 동작 하지 않을 수도 있다는 단점이 있습니다.

이러한 Expo 의 단점을 장점으로 가지는 React Native CLI 가 있습니다. 둘은 반대 성격을 가지며, Expo 의 장점은 React Native CLI 의 단점입니다.

그렇기 때문에 각자의 프로젝트 상황에 맞춰 CLI 를 선택하여 사용하는 편이 좋습니다!
무조건 React Native CLI 가 좋다. Expo CLI 가 좋다. 라고 할 수는 없습니다!

저는 처음 학습 시에 Expo 를 사용했고, 실제 프로젝트를 구축할 때는 React Native CLI 를 사용하였습니다.

이제 가장.. 험난하고, 고난했던 환경 세팅을 알아보겠습니다.
'내 이름은 고난, 역경이죠 😂'

저는 맥북을 사용하기 때문에 맥북 환경 기준으로 작성되어있음을 알려드립니다람쥐.

환경 세팅하기

설치 해야 할 것들이 너무나도 많습니다... 이미 있다면 넘어가셔도 좋고, 없다면 설치해주세요! React Native 공식 홈페이지와 함께하면 더더욱 멋진 새럼 😎

HomeBrew

Mac 을 쓰시는 개발자 분들이라면 너무나도 익숙하고, 이제는 뗄래야 떼어놓을 수 없는 친구입니다.
Mac 용 패키지 관리 애플리케이션으로 다른 여러 프로그램을 쉽고, 간편하게 설치할 수 있도록 도와줍니다! 물론 관리까지도요!

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

만약 나의 Mac 이 M1 이다! 이신 분들은 이 블로그에서 추가적인 스텝을 따라해주세요!

zshrc (Mac)

개발 환경을 구축 할 경우, 변수 설정이 필요합니다. 그럴 때 Mac 에서 환경 변수를 설정해 놓는 쉘 중 하나입니다!
물론 저는 이 친구를 터미널 꾸밀 때 이미 깔아놓았어서 그대로 사용했답니다!
터미널 꾸미는 내용도 조만간 한 번 글을 올려볼게요! 이쁜 환경에서 개발하면 좋잖아요~

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

nvm

다양한 버전의 node.js 를 설치하고 관리하는 기능을 제공합니다.
node 버전 관리를 하려면 설치하는 것이 좋습니다!
HomeBrew 를 설치하셨다면 brew 명령어를 통해 쉽게 설치할 수 있습니다.

brew install nvm

watchman

특정 디렉토리나 파일이 변경되면 지정한 동작을 실행할 수 있게 하는 프로그램입니다.
디버그모드에서 코드를 수정할 때마다 새로 컴파일해서 보여준다는데.. 전 아직까지 써본 적이 없는 것 같습니다. (알고보니 쓰고 있는데 모르는 걸 수도)
공식 홈페이지에서도 권장하는 프로그램이기 때문에, 설치 해보겠습니다. (공홈 맹신)

Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.

마찬 가지로 HomeBrew 를 설치했다면 쉽게 설치 가능합니다.

brew install watchman

cocoapods

swift 또는 Objective-C 프로젝트의 종속성 관리 매니저입니다.
외부에서 받아온 라이브러리를 iOS 환경에서 적용하고 관리하고자 할 때 사용됩니다.
앞으로 새로운 라이브러리를 설치할 경우 pod install 이라는 과정이 필수적이게 될 텐데, 이 때 pod 가 cocoapods 의 pod 입니다

brew install cocoapods

Visual Studio Code

React Native 을 개발하기 위한 코드 편집기 입니다. 웹 개발자들이 많이 사용합니다.
하지만 꼭 VSCode 가 아니어도, IntelliJ 의 Webstorm 등 원하는 것을 사용하면 됩니다.
공식 홈페이지에서 다운받아도 되고, brew 를 이용해 다운받아도 됩니다.

brew install --cask visual-studio-code

Xcode (Mac)

Mac 환경이어야만 다운받을 수 있는 Xcode 입니다.
iOS 용 IDE 이며, iOS 를 개발하기 위해서는 필수인 친구이죠.
이제는 앱스토어도 괜찮다고 하긴 하지만 저는 홈페이지에서 다운받는 것을 추천드립니다.. (괜히 앱스토어 평점이 별 2개인게 아니에요..)

Java Development Kit (JDK)

안드로이드 스튜디오에서 사용되는 gradle 플러그인을 활용하기 위해 필요하다고 합니다.
2019년 1월 부터 오라클 JDK 가 유료화되었기 때문에 React Native 공식 홈페이지에서는 오픈 JDK 인 zulu 를 권장합니다. (줄루줄루~)
두 JDK 는 동일 사양이라고 합니다.

brew install --cask zulu17

제가 여기서 조금 헤맸는데, 2024년 03월 22일 기준 최신이 21 버전인데 제가 사용하려고 했던 React Native 버전과 충돌이 나서 17로 설치하였습니다.

혹시 저와 같이 빌드 에러가 발생하시는 분들은 React Native 버전을 한 번 확인해보세요!
이렇게 JDK 버전 설치를 잘못했다면, 원하는 버전을 다운 받은 뒤 이전 JDK 를 삭제할 수 있습니다.

cd /Library/Java/JavaVirtualMachines/

sudo rm -rf zulu-21.jdk

Android Studio

Android 용 IDE 이며, Xcode 처럼 Android 를 개발하기 위해서 필수인 친구입니다.
안드로이드 스튜디오를 설치한 후 추가적인 세팅이 필요한데 바로 함께 보시죠

설치 후 실행을 하면 아래와 같은 화면이 나타납니다.
아래 화면에서 Projects -> More Actions -> SDK Manager 로 들어갑니다.

다음에 뜨는 화면에서 Languages & Frameworks -> Android SDK -> Show Package Details 로 들어갑니다.

해당 화면에서 아래 내용 체크 후 설치가 되어있지 않다면 Apply 버튼을 눌러 설치합니다.

• Android SDK Platform 34
• Intel x86 Atom_64 System Image 또는 Google APIs Intel x86 Atom System Image
  - (Mac Silicon) Google APIs ARM 64 v8a System Image
• SDK Tools -> Show Package Details -> 34.0.0

자 이제 안드로이드 스튜디오 세팅이 끝났으니, 환경 변수를 설정해주어야 합니다.
저를 따라 위에서 천천히 설치하고 내려오셨다면 zshrc 가 있으시겠죠?
저는 zshrc 를 사용하기 때문에 이 친구를 이용해서 환경 변수 설정을 해주겠습니다.

.zshrc 파일로 이동합니다. 만약 없으면 아래 명령어 입력 후 저장하면 자동으로 생성됩니다.

vim ~/.zshrc

.zshrc 파일 열거나 생성했으면 아래 내용을 추가한 후에 저장합니다.

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

여기서 주의할 점은 혹시나 나중에 터미널 꾸미기를 진행하시기 위해 Oh My Zsh를 설치하신다면 위에 환경 변수 설정했던게 싹 다 날라가니까 조심해주세요!

터미널에서 수정하는데 리눅스 명령어를 모른다면 요것만 기억해두세요!

i (커서 위치에서 insert)
esc + : + wq (저장)
esc + : + q (나가기)
esc + : + q! (강제 나가기 - 저장 안됨)

위 세 개 중 원하는 명령어를 입력하면 파일을 작성하거나, 저장이 된답니다!
혹시 더 많고, 자세한 명령어를 알고 싶으시면 이 블로그를 참고해주세요!

변수 설정을 했으니, 시스템에 등록을 해봅시다! 물론 터미널을 완전 종료했다 키면 되지만 번거로우니까요~

source ~/.zshrc

React Native CLI

저는 Expo가 아닌 React Native CLI 를 사용할 것이기 때문에 요 친구도 함께 설치해줍니다. 혹시 Expo 를 사용하실 예정이라면 Expo 공식 홈페이지를 참고하세요!

npm install -g react-native
npm install -g react-native-cli

여기까지 오신 분들 수고하셨습니다!! 이제 드디어 React Native 를 시작할 수 있게 되었어요!

자 그럼 이제 React Native 프로젝트를 만들고 실행해봅시다!
거의 다왔어요 조금 더 힘내세요!

React Native 시작하기

시작하기 위해서는 프로젝트를 만들어야겠죠? 자 한 번 만들어봅시다.

react-native init --version 0.72 {프로젝트 이름}

여기서도 제가 많은 난관을 겪었는데요.
2024년 03월 22일 기준으로 React Native 최신 버전이 0.73 인데, 이제까지 설치한 다른 프로그램들과 충돌이 나서 0.72 로 버전을 명시하여 프로젝트를 생성하였습니다.

여러분은 최신 버전으로 설치 후 아무 문제 없다면 그대로 사용하셔도 되고, 혹시나 문제가 발생한다면 버전을 낮춰서 프로젝트를 생성해보세요!

설치 중에는 cocoapods 를 미리 설치할 것인지 물어보는데, 어짜피 설치할 것이기 때문에 미리 설치해줍니다!
y 를 입력해줍니다.

마참내!! 이제 새로운 프로젝트가 생성이 되었습니다!!

자 그럼 이제 iOS 와 Android 각각의 시뮬레이터, 애뮬레이터에서 실행해봐야겠죠?
그 전에 node 서버를 실행해줍니다.

지금부터 모든 작업은 생성한 프로젝트 폴더 내부에서 진행되어야합니다.

npm start

iOS 실행

새로운 터미널을 열어서 iOS 를 실행해봅시다.

react-native run-ios

이렇게만 입력하면 기본 시뮬레이터로 실행이 되게 됩니다.
혹시나 시뮬레이터의 기종을 선택하고 싶다면? 아래와 같이 옵션을 입력해줍니다!

react-native run-ios --simulator="iPhone 15"

Android 실행

안드로이드는 애뮬레이터를 미리 실행한 후 명령어를 입력해야만 합니다.
Virtual Device Manager 또는 Device Manager 에서 애뮬레이터를 추가해줍니다.

원하는 기종과 OS 버전을 선택해서 다운 받은 후 위에 보이는 리스트에서 재생 버튼을 눌러 애뮬레이터를 실행시킬 수 있습니다.
그 후 아래 명령어를 이용해 안드로이드를 실행시킵니다.

react-native run-android

자 이제 각각의 시뮬레이터와 애뮬레이터에서 아래와 같은 화면이 나오나요?

축하드립니다! 이제 여러분은 React Native 를 시작할 수 있게 되었어요!
길고 긴 여정을 함께해주셔서 감사합니다!

헤어지기 전에 간단한 팁을 알려드릴게요.
시뮬레이터와 애뮬레이터는 기본적으로 핫리로드(실시간 반영) 가 되기 때문에 코드를 저장하게 되면, 각 시뮬레이터와 애뮬레이터에 바로 반영이 됩니다.
근데, 바로 반영되는거 싫을 수도 있잖아요? 조금만 잘못 쳐도 에러나고, 빨간 화면 보이고 으으으

iOS 에서는 cmd + d -> Disable fast refresh 로 해제할 수 있습니다.
Android 는 cmd + m -> Disable fast refresh 로 해제 가능합니다.

그럼 이제 실시간 반영을 해제했으니, 코드를 변경한 후 변경되었는지 보려면 새로고침을 해야겠죠?
iOS 에서는 cmd + d -> reload 를 눌러 새로고침이 가능합니다.
Android 에서는 rr 을 눌러 새로고침을 할 수 있습니다.

드디어 끝났습니다!!!
아휴 길고 길었다. 여기까지 잘 따라와주신 분들은 축하드립니다! 다들 React Native 로 세상을 지켜(?) 봅시다!!

모두들 안녕-쟈네-👋