React Native 개발 환경 설정 - 모바일 앱 개발 초보자를 위한 React Native #2

이번에는 React native 관련 두 번째로 개발 환경 설정에 대해 정리해 보겠습니다. 

React Native 개발 환경 설정

 

React Native 개발 환경

  React Native 개발을 위한 필수 도구

React Native로 앱을 개발하려면 몇 가지 필수 도구를 설치해야 합니다. 기본적으로 JavaScript 런타임 환경과 모바일 개발을 위한 도구가 필요합니다.

도구	설명
Node.js	JavaScript 실행 환경, npm 패키지 매니저 포함
npm 또는 yarn	JavaScript 라이브러리 및 패키지 관리 도구
Expo CLI React	React Native 앱을 손쉽게 개발할 수 있도록 돕는 프레임워크
React Native CLI	Expo보다 더 자유로운 개발 환경을 제공하는 CLI
Android Studio	Android 앱 개발을 위한 필수 도구 (에뮬레이터 포함)
Xcode	iOS 앱 개발을 위한 필수 도구 (macOS 전용)

 

 

반응형

 

  Windows와 macOS 환경에서의 개발 환경 설정

당연한 얘기지만, React Native 개발 환경을 설정하는 방법은 Windows와 macOS가 다릅니다. iOS 개발은 Apple의 Xcode가 필요하기 때문에 Windows에서는 iOS 앱을 개발할 수 없습니다. 하지만 Android 앱 개발은 두 운영체제에서 모두 가능합니다.

 

(1) Node.js 및 npm 설치

React Native 프로젝트를 실행하려면 JavaScript 런타임 환경인 Node.js가 필요합니다. Node.js에는 패키지 관리 도구인 npm(Node Package Manager)가 포함되어 있어, React Native 관련 패키지를 설치할 수 있습니다.

 

설치 방법 (Windows/macOS 공통)

• Node.js 공식 웹사이트에 접속
• LTS 버전(Long-Term Support) 다운로드
• 설치 진행 후 터미널에서 node -v와 npm -v로 정상 설치 확인

node -v 
npm -v

 

 

 

 

(2) Expo CLI 또는 React Native CLI 설치

React Native 프로젝트를 만들 때 Expo CLI와 React Native CLI 두 가지 방식이 있습니다.

구분	Expo CLI	React Native CLI
설정 난이도	쉬움	어려움 (환경 설정 필요)
빌드 속도	빠름	다소 느림
네이티브 코드 수정	불가능	가능
사용 용도	간단한 앱 개발, 빠른 테스트	네이티브 기능이 필요한 앱

 

 

Expo CLI 설치 (Windows/macOS 공통)

npm install -g expo-cli

 

React Native CLI 설치 (Windows/macOS 공통)

npx react-native init MyProject

 

 

(3) Android 개발 환경 설정 (Windows/macOS)

Android 앱을 실행하려면 Android Studio와 Java JDK를 설치해야 합니다.

 

설치 방법

• Android Studio 다운로드
• 설치 후, Android SDK, Android Emulator, AVD Manager 활성화
• 환경 변수 설정 (ANDROID_HOME 및 PATH 추가)

echo $ANDROID_HOME

 

(4) iOS 개발 환경 설정 (macOS 전용)

iOS 앱을 개발하려면 Xcode가 필요합니다.

 

설치 방법

• Mac App Store에서 Xcode 설치
• Xcode 실행 후 Command Line Tools 설치

xcode-select --install

 

• CocoaPods 설치

sudo gem install cocoapods

 

 

 

  첫 번째 React Native 프로젝트 설정 및 실행

(1) 새로운 React Native 프로젝트 생성하기

Expo CLI 방식

expo init MyFirstApp
cd MyFirstApp
expo start

 

React Native CLI 방식

npx react-native init MyFirstApp
cd MyFirstApp
npx react-native start

 

(2) 시뮬레이터 및 실제 기기에서 실행

Expo CLI (스마트폰에서 실행)

• 앱스토어/플레이스토어에서 Expo Go 앱 설치
• expo start 실행 후, QR 코드 스캔

 

React Native CLI (에뮬레이터 실행)

npx react-native run-android	# Android 
npx react-native run-ios	# iOS (macOS 전용)