React Native 소개 및 개발 환경 구축

TAVE 에서 새로 시작한 프로젝트에서 React Native 로 앱 개발을 하게 되어서 새롭게 배우게 되었다.

제 계획에 앱 개발은 없었지만 플젝에서 한다는 데 해야겠죠 .. 그래도 리액트랑 비슷하다니까 한번 도전해보고 싶어지긴 한다 !

React Native 소개

페이스북에서 만든 오픈소스 모바일 응용 프로그램으로, 네이티브 앱 개발을 위한 JS 프레임워크이다.

리액트 네이티브는 크로스 플랫폼이므로 단 하나의 코드 개발로 IOS와 안드로이드에서 동일하게 동작시킬 수 있는 API이다.

안드로이드 개발만을 위한 자바나 코틀린, ios 개발만을 위한 swift 보다 진입장벽이 낮고 쉽다 !

게다가 리액트 기반이므로 리액트를 알고있다면 더욱 쉽게 배울 수 있다.

React Native 기본 원리

리액트 네이티브는 앱을 빌드할 때 앱의 전체 로직을 가지고 있는 JS 번들을 만들고, 그 번들을 각 플랫폼에 심어준다.

리액트 네이티브로 각 플랙폼에 네이티브 앱 제작이 가능한 이유는, 이 브릿지라는 개념을 제공하기 때문이다.

Native Threads와 JS Thread는 서로 직접 통신할 수 없고, 브릿지를 통해서 통신한다.

 

Expo CLI vs. React Native CLI

JS Bundle 을 만드는 두 가지 방법이다.

Expo CLI

초보 개발자가 사용하기 편리한 패키지

장점

• 개발 환경 구축이 용이하다.
• 실제 개발이 쉽고 편하다.

단점

• OS layer과 직접 상호작용이 불가능하다. (Java, Kotlin, Swift로 추가 작성이 불가능)
• Expo에서 제공하는 모듈만 사용 가능

→ 개발 자유도가 낮다.

 

React Native CLI

장점

• Expo로는 접근하지 못하는 Native 기능에 접근할 수 있다.
• 원하는 언어로 추가 작성을 할 수 있다.
• OS layer와 직접적이 상호작용이 가능하다.

단점

• 초기 개발 환경 구축 밒 실제 앱 개발 시 다소 시간이 소요된다.
• Mac일 때 좋다..

 

이러한 이유로 우리는 React Native CLI를 사용할 것이다.

 

설치하기

다음 9개의 프로그램 설치가 되어야 한다.

• NVM (Node Version Manager): [Windows NVM 설치하기(install)](https://dulidungsil.tistory.com/entry/Windows-NVM-설치하기install#:~:text=윈도우에서 NVM 설치는 Linux (Ubuntu)%2C macOS 와 WSL2에서,설치할 폴더를 선택합니다. 노드 (Node.js)를 설치할 폴더를 지정합니다.)
• node.js
• npm (Node Package Manager)
• Android Studio: [Android Studio] 안드로이드 스튜디오 설치 방법 (완전 쉽고, 자세하게!)
  • Windows에서 Android 개발 환경 준비하기(Android Studio 설치) → SDK 설정
• JAVA
• VS Code
• React Native CLI
• XCode
• CocoPod

이 둘은 맥 용이라 설치를 못했는데 방법을 알아봐야겠다..

// 이거 설치하는데 너무너무 오래걸렸다 .. 정말 …