[React Native] 0-4. 시작하기

안녕하세요! RyuWoong입니다.

이번 글은 React Native 프로젝트를 만들고 실행해보도록 하겠습니다.

---

 

익숙하신 분은 아래 사이트를 참조하여 설정하시면 되겠습니다.

Setting up the development environment · React Native

 

시작

저는 Mac OS 환경을 기준으로 작성하겠습니다.

 

우선, React Native를 설치하는 두 가지 방법이 있습니다.

하나는 Expo라는 React Native Framework이고, 하나는 순수 React Native입니다.

과거에 Expo는 Native Module을 설치하거나, Native 설정을 변경하는데 한계가 존재하여 순수 React Native로 개발 했으나 최근에 이러한 문제들은 Prebuild 같은 옵션으로 해결 되었습니다. 따라서 Expo를 사용하셔서 개발하셔도 무방합니다. 다만 RN에 대한 자료가 적은 와중에 Expo는 실 개발에서 많이 이용되지 않았기 때문에 관련 자료가 많지 않아 문제 해결에 어려움을 겪을 수도 있습니다.

 

저는 순수 React Native를 기준으로 설명 드리겠습니다.

우선, Brew를 설치해줍니다.

Homebrew

 

Brew 설치가 끝나면, node와 watchman을 설치해줍니다.

React Native 0.73 버전 기준으로 node는 20 버전을 요구합니다.

brew install node
brew install watchman

 

Android

Android 환경 설정을 먼저 해주도록 하겠습니다.

Android는 Java를 필요로 합니다. 따라서 우리는 Brew를 이용해 자바를 설치해주겠습니다.

brew tap homebrew/cask-versions
brew install --cask zulu17

# 제대로 설치 되었는지 아래 명령어를 통해 확인 가능합니다.
brew info --cask zulu17

추후 Android Studio에서 JDK를 설정하셔도 되지만, zshrc 또는 bashrc 파일 내 하단에 JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home 을 추가해도 좋습니다.

 

그리고 아래 사이트에서 Android Studio를 설치합니다.

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

그리고 Setting → Languages & Frameworks → Android SDK 내에서 Android 14를 설치해줍니다.

 

• Android SDK Platform 34 (필수)
• Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image or (for Apple M1 Silicon) Google APIs ARM 64 v8a System Image (맥 종류에 따라 선택)

 

Intel Mac이라면 Intel이라고 적힌 것들을 설치하면 되고, Silicon Mac이라면 ARM 64를 설치하면 됩니다.

.zshrc 또는 .bashrc 파일 내 제일 하단에 아래와 같이 입력하여 환경 변수를 설정합니다. 

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

 

iOS

다음은 iOS입니다.먼저 AppStore에서 Xcode를 설치합니다.

그리고 Setting - Preference - location 내 Command Line Tools에 값이 올바르게 기입되어 있는지 확인해주세요. 비어 있다면 드롭다운박스를 열어 설정해주거나, Command Line Tools를 설치 하셔야 합니다.

 

아래 명령어를 통해 Cocoapods를 설치해줍니다. 

brew install Cocoapods

설치가 완료 되었으면 환경 준비는 다 끝났습니다.

 

React Native 프로젝트 생성 및 실행

이제는 RN 프로젝트를 생성해봅시다!

아래 명령어로 RN 프로젝트를 신규 생성 할 수 있습니다.

npx react-native init AwesomeProject

# 중간에 pod install할 건지 여부를 물어볼 수도 있는데 수락합시다.

 

설치가 올바르게 끝났다면, 아래 명령어를 통해 metro를 실행하고

npm start

 

이어서 ios환경 또는 Android 환경으로 RN 프로젝트를 실행하세요!

npm run ios
npm run android

 

 

여기까지 잘 실행 하셨으면, 무사히 RN프로젝트를 시작할 수 있습니다.

RN은 실행하는데 반일 만큼 다양한 이유로 Build에 실패하고 오류를 뿜어냅니다.

웃기게도, 어제 잘 실행 되던 프로젝트가 다음날 실행하면 실행이 안되고 하는 일이 종종 발생합니다.

그러면 차분하게, 빼먹은게 있는지 돌아보거나, Metro Reset, Build Clean, 에러메세지 중 중요한 키워드를 구글링 하는 방식으로 해결합니다. 그러니 너무 걱정마시고 오류를 만나더라고 당황하지 마세요!

 

잘 실행 시키셨길 바라며, 궁금한 점은 댓글이나 메일로 알려주세요!