React Native 설치 및 환경 설정 자세히 알아보기

React Native 설치 및 환경 설정에 대해 자세히 알아보겠습니다. Node.js, JDK 설치부터 Android 및 iOS 시뮬레이터 설정까지, React Native 개발을 위한 모든 단계를 쉽고 상세하게 이야기해보려고 합니다.

 

React Native란 무엇인가?

React Native는 페이스북에서 개발한 오픈 소스 모바일 애플리케이션 프레임워크로, JavaScript와 React를 사용하여 네이티브 모바일 애플리케이션을 개발할 수 있습니다. 처음 React Native를 접했을 때, 한 번의 코드 작성으로 iOS와 Android 앱을 동시에 개발할 수 있는 점, 그리고 다른 하이브리드 개발 방식 보다 성능면에서 뛰어난 점에서 많이 흥미로웠습니다. 실제로 개발을 시작하면서 다양한 네이티브 기능을 JavaScript 코드로 구현할 수 있는 점에서 굉장히 큰 매력을 느꼈습니다.

React Native의 주요 특징

React Native는 크로스 플랫폼 개발을 지원하여, 하나의 코드베이스로 두 가지 플랫폼(Android와 iOS)을 모두 지원할 수 있습니다. 이는 개발 효율성을 높이고 유지보수를 쉽게 하여 많은 스타트업과 대기업이 React Native를 선택하는 이유 중 하나입니다. 페이스북, 인스타그램, Airbnb와 같은 서비스들이 React Native로 개발된 점도 큰 신뢰를 주었습니다.

React Native의 장점과 단점

React Native의 가장 큰 장점은 '코드의 재사용성'입니다. 동일한 코드를 iOS와 Android에서 사용할 수 있어 개발 시간과 비용을 절약할 수 있습니다. 또한, React Native는 JavaScript 코드를 네이티브 UI 컴포넌트로 변환하여 다른 하이브리드 프레임워크에 비해 성능이 뛰어난 편입니다. 이는 네이티브 컴포넌트를 직접 사용하기 때문에 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다는 점에서 큰 장점이 됩니다. 하지만, React Native에서 네이티브와 유사한 컴포넌트들을 사용해야 하며, 순수 웹 기술과는 조금 다른 점이 있습니다. 이러한 점은 '작은 단점이라면 단점'으로 볼 수 있지만, 이를 이해하고 나면 큰 문제가 되지 않습니다. 복잡한 네이티브 모듈을 구현할 때는 추가적인 작업이 필요할 수도 있습니다.

 

React Native 설치를 위한 사전 준비

개발 환경 이해하기 (Windows, macOS)

React Native는 Windows와 macOS 둘 다에서 설치할 수 있지만, iOS 시뮬레이터는 macOS에서만 실행 가능합니다. 따라서 iOS 앱 개발을 계획하고 있다면 macOS가 필수입니다. Android 개발은 두 운영체제 모두에서 가능합니다.

Node.js 설치

Node.js는 React Native 개발에 필수적인 런타임입니다. Node.js 공식 웹사이트에서 최신 LTS 버전을 다운로드하여 설치합니다. 설치 후, 터미널에서 node -v와 npm -v 명령어로 Node.js와 npm 버전을 확인할 수 있습니다.

JDK(Java Development Kit) 설치

React Native는 Android 개발을 위해 JDK가 필요합니다. Oracle JDK 또는 OpenJDK를 다운로드하여 설치합니다. 설치 후, 환경 변수를 설정해야 합니다.

JDK 설치 확인

설치가 완료되면 터미널이나 명령 프롬프트에서 다음 명령어를 입력하여 JDK가 정상적으로 설치되었는지 확인합니다.

java -version

JDK 버전이 출력되면 정상적으로 설치된 것입니다.

환경 변수 설정 (Windows)

• '내 PC' 또는 '내 컴퓨터'를 우클릭하고 '속성'을 선택합니다.
• '고급 시스템 설정'을 클릭한 뒤, '환경 변수'를 클릭합니다.
• '시스템 변수'에서 'Path'를 찾아 편집을 누르고, JDK의 bin 경로를 추가합니다 (예: C:\Program Files\Java\jdk-XX.X.X\bin).

환경 변수 설정 (macOS)

• 터미널에서 ~/.bash_profile 또는 ~/.zshrc 파일을 엽니다.
• 다음 줄을 추가하여 JDK 경로를 설정합니다.

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-XX.X.X.jdk/Contents/Home
export PATH=$PATH:$JAVA_HOME/bin

• 파일을 저장한 후, 다음 명령어로 변경 사항을 적용합니다.

source ~/.bash_profile

Android Studio 설치 및 설정

Android Studio는 Android Emulator를 실행하기 위한 필수 도구입니다.

Android Studio 설치

Android Studio 공식 사이트에서 최신 버전을 다운로드하고 설치합니다.

SDK 설정

Android Studio를 처음 실행하면, Android SDK를 설치할 수 있는 옵션이 나옵니다. 기본 설정으로 설치를 진행합니다.

AVD (Android Virtual Device) 설정

Android Studio의 'AVD Manager'를 열어 새로운 가상 장치를 생성합니다. 에뮬레이터의 성능을 개선하려면 하드웨어 가속을 활성화하고 적절한 RAM을 할당합니다.

Xcode 설치 및 설정

iOS 앱을 개발하려면 Xcode가 필요합니다. Xcode는 macOS에서만 사용할 수 있는 iOS 개발 도구로, iOS Simulator를 사용하여 앱을 테스트할 수 있습니다.

Xcode 설치

Mac App Store에서 Xcode를 다운로드하고 설치합니다. 최신 버전의 Xcode를 사용하는 것이 중요합니다.

Xcode Command Line Tools 설치

터미널에서 다음 명령어를 입력하여 Xcode Command Line Tools를 설치합니다.

xcode-select --install

이 명령어를 실행하면 Command Line Tools 설치 창이 나타나며, 설치를 진행할 수 있습니다.

iOS Simulator 설정

Xcode를 실행한 후, 'Xcode > Preferences'로 이동하여 'Components' 탭에서 원하는 iOS 버전의 시뮬레이터를 설치할 수 있습니다.

 

React Native 설치 및 프로젝트 생성

React Native를 설치하는 방법에는 두 가지가 있습니다. Expo CLI를 사용하는 방법과 React Native CLI를 사용하는 방법입니다.

Expo CLI와 React Native CLI 비교

Expo CLI는 빠르고 간편하게 React Native 앱을 시작할 수 있게 해줍니다. 하지만 모든 네이티브 기능을 지원하지 않는다는 단점이 있습니다. 반면, React Native CLI는 더 많은 자유도와 네이티브 기능 지원을 제공하지만, 설치 과정이 다소 복잡할 수 있습니다.

Expo CLI로 설치하기

Expo CLI를 사용하여 React Native를 설치하려면, 터미널에서 다음 명령어를 입력합니다.

npm install -g expo-cli
expo init MyFirstApp

이 명령어는 기본 설정된 Expo 프로젝트를 생성합니다. Expo는 초보자가 쉽게 접근할 수 있어, 빠르게 앱을 시작하고 테스트하기에 적합합니다.

React Native CLI로 설치하기

React Native CLI를 사용하려면 터미널에서 다음 명령어를 입력하여 프로젝트를 생성합니다.

npx react-native init MyFirstApp

 

이 방법은 Android 및 iOS 네이티브 기능을 모두 제어하고자 할 때 적합합니다.

 

Android 및 iOS 시뮬레이터 설정

Android Emulator 설정

Android Studio에서 'Tools > Device Manager' 메뉴를 선택하여 AVD Manager를 열고 새로운 가상 장치를 생성합니다. 저는 처음 설정할 때 에뮬레이터의 성능이 너무 느려서 불편함이 컸는데요. 하드웨어 가속을 활성화하고 적절한 RAM을 할당하니 성능이 크게 개선되었습니다.

iOS Simulator 설정

macOS에서 iOS Simulator는 Xcode를 통해 실행할 수 있습니다. Xcode를 열고 'Window > Devices and Simulators' 메뉴를 선택한 후, 'Simulators' 탭에서 실행하고자 하는 시뮬레이터를 선택하여 실행할 수 있습니다. iOS Simulator는 Android Emulator보다 빠른 반응 속도를 제공하여 테스트 과정에서 큰 도움이 됩니다.

 

React Native 앱 실행하기

Android에서 앱 실행

생성한 프로젝트 폴더로 이동하여, 다음 명령어로 Android 에뮬레이터에서 앱을 실행합니다.

npx react-native run-android

에뮬레이터가 제대로 설정되어 있다면, 앱이 자동으로 빌드되고 실행됩니다.

iOS에서 앱 실행

macOS에서는 다음 명령어로 iOS Simulator에서 앱을 실행할 수 있습니다.

npx react-native run-ios

Xcode와 Simulator 설정이 올바르게 되어 있다면, 앱이 빌드되고 iOS Simulator에서 실행됩니다.

 

개발 환경 최적화하기

코드 에디터 설정 (VS Code 추천 플러그인)

Visual Studio Code는 React Native 개발에 매우 적합한 코드 에디터입니다. React Native Tools, ESLint, Prettier와 같은 플러그인을 설치하여 코드 작성과 디버깅을 쉽게 할 수 있습니다.

ESLint와 Prettier 설정

코드 일관성을 유지하기 위해 ESLint와 Prettier를 설정하는 것이 좋습니다. 저는 프로젝트에 ESLint와 Prettier를 적용한 이후, 코드 스타일에 대한 고민 없이 개발에 집중할 수 있었습니다.

 

마무리하며

React Native 설치 및 환경 설정 과정은 처음에는 다소 복잡하게 느껴질 수 있지만, 단계별로 차근차근 따라가면 누구나 쉽게 개발을 시작할 수 있습니다. React Native는 크로스 플랫폼 앱 개발의 매력을 충분히 느낄 수 있게 해주는 도구이며, 올바르게 환경을 설정하면 훌륭한 앱을 개발하는 데 큰 도움이 될 것입니다. 이 글이 React Native 앱 개발을 시작하는데 도움이 되길 바랍니다.