[클라우딩 어플리케이션 엔지니어링 TIL] 240314 - React Native 시작하기

Intro

---

리액트 프로젝트가 마무리되고 오늘부턴 React Native에 대한 강의가 시작되었다.

 

 

 

오늘 학습한 내용

---

React Native의 탄생

PDA 등장과 피처폰의 시대를 지나 스마트폰이 등장한 이후 앱 개발의 패러다임 변화가 일어났다.

iOS나 안드로이드 앱을 개발하는 개발자가 많아졌고 iOS와 안드로이드 앱을 별도로 개발해야 하는 단점을 보완하고자 앱 안에 웹을 불러오는 웹앱과 하이브리드 앱이 등장했다. 더불어 등장한 크로스 플랫폼은 웹을 띄우는 방식이 아닌 앱을 만들어 여러 플랫폼에서 동작 가능한 기술이다. 대표적으로 React Native와 Flutter, Xamarin이 있다.

 

React Native는 2015년 3월 페이스북 F8 컨퍼런스에서 공식 발표했으며 초기 버전은 iOS 지원에 초점을 두고 개발되었다.

 

버전이 올라가면서 React Native의 변경점으론 다음과 같다.

• FastRefresh
  • 앱을 재실행할 필요 없이 즉시 화면을 업데이트함으로 생산성을 향상시킨다.
  • 0.6x 버전 초반에 변경됨
• Auto link
  • iOS, Android 라이브러리를 각 네이티브 설정 없이 적용이 가능하다.

 

Flutter VS React Native

Flutter가 자바스크립트 엔진에서 동작하는 React Native 대비 성능이 뛰어난 장점이 있다.

그러나 Flutter는 Dart라는 언어를 사용하기 때문에 낯설게 느껴질 수 있다. 그래서 리액트 기반인 React Native를 배우기에 더 익숙할 수 있다.

 

 

 

React Native의 현재와 미래의 전망

• 2019년 Hermes JavaScript Engine
• 2022년 Fabric과 Turbo Modules
• 그리고 맥 없이 iOS 개발에 도움을 주는 Expo를 꾸준히 지원하고 있다.

 

 

 

---

React Native의 기본 원리

React Native는 JavaScript로 개발한다. 앱 내에서 JavaScript 엔진이 작동한다.

(네티이브 앱에선 Android는 Kotlin이나 Java / iOS는 Swift나 Objective-C로 개발)

 

React Native 특징 3가지

1. One Source Multi Use
   • 하나의 코드로 여러 플랫폼을 지원한다.
2. 핫 리로딩
   • 앱을 다시 빌드하거나 재시작할 필요가 없다.
3. React
   • 앱의 상태에 따라 UI가 어떻게 보여야 하는지 선언
   • 상태 변화가 있을 때 자동으로 UI가 업데이트 된다.

 

 

 

---

React Native 개발환경 구성하기

React Native · Learn once, write anywhere

 

Get Started 버튼을 클릭하여 React Native CLI Quickstart에서 각자 개발 환경에 맞게 설치한다.

나는 macOS에 아이폰을 사용하고 있기 때문에 설치가 비교적 간단했다.

 

brew install node
brew install watchman

 

brew로 node와 watchman을 설치한다.

Homebrew

 

CocoaPods는 정확히 무슨 역할인지 잘 모르겠지만 일단 설치한다.

CocoaPods.org

 

XCode도 없다면 설치 후 문서에 나온대로 진행하면 된다.

모든 설정이 끝나면 새로운 프로젝트를 생성한다.

npx react-native@latest init AwesomeProject

 

 

실행

• vscode

npm start

 

• xcode

open ➡️ 프로젝트 폴더의 ios 폴더 열기 ➡️ '►' 버튼 클릭

 

 

 

마무리

---

오늘은 React Native를 공부하기 위해 개발환경 세팅을 하였는데 다행히도 Mac + iOS 사용자라 크게 어려움은 없었다.

안드로이드 환경도 체크하고 싶어 안드로이드 스튜디오를 설치를 했는데 용량 부족으로 다시 삭제했다.. 😂