[React Native] - React Native란? (CLI 프로젝트 생성, CLI 설치)

🧹 간단 정리

리액트 네이티브는 React 언어만 공부하여도 앱을 개발할 수 있다.

코드 하나로 And, Ios 개발이 가능하다.

🧑🏻‍💻 React Native 설명

리액트 네이티브(React Native)는 Facebook에서 개발한 오픈 소스 모바일 앱 개발 프레임워크이다.

 

이 프레임워크는 JavaScript와 React를 사용하여

iOS와 Android 플랫폼용 네이티브 모바일 애플리케이션을 개발하는 데 도움을 준다.

 

💁🏻‍♂️ 리액트 네이티브 주요 특징

• 크로스 플랫폼 개발: 한 번의 코드베이스로 iOS와 Android용 앱을 개발할 수 있다.
• 리액트 기반: 리액트(React)의 개념과 구문을 사용하므로 웹 개발자들이 비교적 빠르게 모바일 앱 개발이 가능하다.
• 네이티브 성능:  네이티브 앱과 동일한 성능을 제공한다. (JavaScript 코드를 네이티브 코드로 변환하여 실행하기 때문).
• 커뮤니티와 생태계: 활발한 개발자 커뮤니티와 다양한 라이브러리 및 플러그인 생태계를 가지고 있어서 개발 효율성이 좋다.
• 핫 리로딩: 앱을 실행 중에 코드 변경을 실시간으로 반영할 수 있는 핫 리로딩 기능을 제공하여 빠르게 앱을 개발하고 디버깅할 수 있다.

따라서 리액트 네이티브를 사용하면 비교적 쉽게 모바일 앱을 개발할 수 있고

웹 앱 개발 경험이 있는 개발자들에게 특히 유용하며,

플랫폼 개발을 통해 앱을 여러 플랫폼에서 동시에 배포하고 유지 보수하는 데 도움을 준다.

 

---

👀 네이티브 코드(Native Code)란?

특정 플랫폼 OS (예: iOS, Android, Windows)에 직접 작성된 프로그래밍 코드를 의미.
한 마디로 IOS 개발 시 Swift, And 개발시 Kotlin, java라고 생각하면 된다. ( OS -> And, IOS)

 

이 코드는 해당 플랫폼의 하드웨어와 운영 체제에 가까운 수준에서 동작하며

일반적으로 C, C++, 또는 Objective-C (iOS), Java (Android), C# (Windows) 등과 같은 저수준 프로그래밍 언어로 작성된다.

 

🌐 CLI와 Expo

리액트 네이티브는 CLI와 Expo 2가지 방법으로 개발이 가능하다.

Expo는 CLI의 불편함들이 개선된 버전이지만 그만큼 호환성의 이슈도 있다.

👉🏻 차이점 

• Native CLI
  • 소개
    • 기본 화면은 App.tsx이다.
    • 0.71 버전부터는 typescript가 자동적용
    • 외부 라이브러리 다운로드 시 반드시 CocoaPods를 사용하여 종속성(dependency)을 설치해주어야 한다.
      (종속성 설치 명령어 : $ cd ios && pod install && cd..)
  • 장점
    • 개발 환경을 구축하기가 쉽다.
    • 다양한 라이브러리 사용 가능
    • Native 모듈 사용 가능
    • 커스터마이즈 (높은 자유도)
  • 단점
    • 빌듯이 플랫폼별 IDE가 필요 (Android Studio, Xcode Mac 필요)
    • 모든 라이브러리 직접 설치
• expo CLI
  • 소개
    • 기본 화면은 App.js이다.
  • 장점
    • React Natvie를 위한 기본 설정을 미리 구성
    • 개발하기 어려운 기능들이 기본으로 탑재되어 있다. (앱푸시, 애플로그인 등)
    • 플랫폼 별 IDE가 없어도 QR코드를 통해서 해당 프로젝트를 실행 가능
  • 단점
    • expo에서 지원하지 않는 네이티브 라이브러리는 쓸 수 없다.
    • Expo 서버로 빌드할 경우 무료 사용자들은 자신의 앱 빌드를 차례를 대기해야 한다.

 

 

위와 같이 Expo는 웹 페이지에서 직접 실행결과를 볼 수 있다. (공식문서 링크 참고)

https://reactnative.dev/docs/getting-started

Introduction · React Native

 

 

---

🧱 사전준비

• 개발 OS, 개발 타깃 OS(휴대폰 기종)에 맞춰 설치를 진행한다.
  • (참고) https://reactnative.dev/docs/environment-setup? os=macos
• 진행할 환경 : [개발 OS : Mac / 개발타깃 OS : Ios, And]

 

▶️ Node & Watchman 설치

brew install node
brew install watchman // 파일 시스템 변경 사항을 모니터링하고 감지하는 도구

 

⚒️ IDE 설치

• Xcode 설치 : App Store 접속 > Xcode 설치
• Android Studio 설치 : https://developer.android.com/studio

 

(🚨 중요) CocoaPods 설치

• IOS 개발 언어인 Swift와 Objective-C를 위한 의존성 패키지 매니저

sudo gem install cocoapods

 

(만약 이전에 글로벌 react-native-cli 패키지를 설치한 경우)

• 예기치 않은 문제를 일으킬 수 있으므로 제거필요

npm uninstall -g react-native-cli @react-native-community/cli

 

🗂️ 프로젝트 생성

npx react-native@latest init projectName

 

🏃🏻‍♂️ 실행방법

1. npm start > i(ios) or a(and)로 시뮬레이터 선택
   • npm start > i(시뮬레이터 작동 후) > a 진행 시 2개 의 시뮬레이터 실행 가능
2. npm run ios 시 ios 즉시 실행 가능(And 동일)