[React Native] React Native

2020. 12. 23. 11:53React/React Native

1. React Native

1) React Native 란?

React Native는 페이스북에서 만든 오픈소스 모바일 응용 프로그램이다. 네이티브 앱 개발을 위한 자바스크립트 프레임워크이다. 크로스 플랫폼인 만큼 단 하나의 코드로 iOS와 AOS에서 동일하게 동작 시킬 수 있는 API이다. React Native는 자바스크립트를 기본 언어로 사용하며 iOS, AOS 네이티브 앱보다 가볍고 사용하기 쉬운 장점을 가지고 있다. 선수지식으로는 HTML, CSS, 자바스크립트, ES6, React의 선수 지식이 필요하다.

2) React Native 기본 원리

기본적으로 iOS, AOS는 각각의 언어를 이용하여 OS에 맞는 플랫폼에 타게팅을 해주는 컴파일러가 존재한다. 크로스 플랫폼인 리액트는 자바스크립트 개발 코드를 각 OS 플랫폼에 타게팅해준다고 생각하면 된다. React Native에서는 앱을 빌드할 때 앱의 전체 로직을 가지고 있는 JS Bundle을 만들고, 이를 각 플랫폼에 설치를 해준다. 설치된 JS Bundle은 JS Thread에 의해 실행이 되는데, 각 플랫폼에서 앱을 실행하기 위한 Native Threads와 직접 통신을 할 수 없고, React Native에서 제공하는 Bridge를 통해 통신이 이루어진다.

 

쉽게 말한다면, 단 하나의 코드로 iOS와 AOS에서 동일하게 동작 시킬 수 있는 이유는 React Native에서 제공하는 Bridge가 있기 때문이다.

React Native 기본 원리

3) React Native CLI

JS Bundle을 만들고 실제 앱을 실행시키기 위한 방법에는 두가지가 있다. 그 중 많은 React Native 초심자들은 Expo CLI를 많이 사용한다. Expo CLI는 자주 사용하는 기능을 패키지로 제공하고 실제 개발이 쉽고 편리하다는 점에서 큰 장점을 가지고 있지만 OS Layer와 직접 상호작용이 불가능하다는 단점이 있다.

 

그에 비해 React Native CLI는 Java, Kotlin, Object-C, Swift 등으로 OS Layer와 직접적인 상호작용을 통해 추가 개발이 가능하다는 장점이 있다. (초기 개발 환경을 구축하고 실제 앱 개발에는 시간이 소요되며, Window에서는 iOS 시뮬레이터를 사용하지 못하기에 Mac에서 개발하는 것을 권장)

4) 초기 환경 구축 (설치 목록)

  • NVM (Node Version Manager)
  • Node.js
  • NPM (Node Package Manager)
  • Android Studio
  • Java
  • Xcode
  • Visual Studio Code
  • CocoaPod
  • React Native CLI
728x90