react-native를 학습을 위해 몇가지 강의 자료들을 시청했다.

역시나 모든 학문의 시작점은 지루한 이론...

React-naive란?

React Native는 Facebook에 의해 개발되고, 현재 오픈소스로 관리되는 크로스플랫폼 모바일 애플리케이션 개발 프레임워크이다.

이 프레임워크를 통해 개발자는 JavaScript와 React의 개념을 사용하여 iOS와 Android 모두에서 실행될 수 있는 네이티브 모바일 애플리케이션을 만들 수 있다.

React Native의 주요 특징

1. 네이티브 성능

React Native는 네이티브 컴포넌트를 직접 사용하기 때문에, 순수 네이티브 앱에 가까운 사용자 경험을 제공한다.

JavaScript 코드는 별도의 스레드에서 실행되며, 네이티브 코드와 비동기적으로 통신한다.

네이티브(native) 란?
모바일 앱 개발 분야에서 "네이티브"는 특정 플랫폼(iOS, Android)에 최적화되어 설계되고 구현된 애플리케이션 또는 컴포넌트를 의미한다.
네이티브 앱은 해당 운영 체제의 언어(iOS의 경우 Swift 또는 Objective-C, Android의 경우 Java 또는 Kotlin)로 작성되며, 운영 체제의 API와 직접 상호 작용한다.

2. 하나의 코드베이스

iOS와 Android 앱을 동시에 개발할 수 있으므로, 코드 재사용성이 높아지고 개발 시간이 단축된다. 특정 플랫폼에 맞는 코드를 작성해야 할 경우에도, 대부분의 비즈니스 로직은 공유할 수 있다.

3. 핫 리로딩

소스 코드가 변경될 때마다 앱을 새로 컴파일하고 장치에 다시 로드할 필요 없이, 수정된 부분만 즉시 반영된다.

4. 강력한 커뮤니티와 에코시스템

React Native는 활발한 커뮤니티와 광범위한 서드파티 라이브러리를 보유하고 있어, 다양한 기능을 쉽게 구현할 수 있다. 문제 해결이나 새로운 기능 추가에 있어서 많은 자원을 활용할 수 있다.

사용 사례
Facebook, Instagram, Airbnb, Tesla 등 많은 유명 기업들이 React Native를 사용하여 자사의 모바일 앱을 개발하였다. 
이는 실제 대규모 애플리케이션에도 적합하다는 것을 입증한다.

나는 왜 App 개발을 React-native로 입문하는가?

Flutter vs React-native

현재 App 개발 프레임워크로 가장 핫한 친구들은 Flutter와 React-native이다.

React-native를 내 인생 첫 App 개발 프레임워크로 선정한 이유는 다름 아닌 러닝커브 때문이다.

이전까지 React.js를 다뤄왔기 때문에 React-native를 학습하는 것에 큰 어려움이 없고 학습 기간을 단축할 수 있다고 생각했다.

실제로 React의 선언적 UI 패러다임, 컴포넌트 기반 구조, 상태 관리 등의 장점을 모바일 App 개발에 그대로 적용할 수 있다는 장점이 있다.

React-native 동작방식

자네, 우리 대화 좀 할까?

React-native의 동작 방식을 학습하며 느낀점이 있다.

마치 두 객체가 서로 명령하고 수행하는 방식이라는 점이다.

때문에 이해력이 다소 귀여운 내가 이해하기 쉽도록 조금 변형해서 정리해 보겠다.

이 공간에는 3개의 객체가 있다.

1. 자바스크립트

2. 운영체제 (iOS, Android)

3. 사용자 (user)

사용자는 React-native로 만들어진 App에서 버튼 UI를 누른다.

사용자와 App의 상호작용을 유심히 감시하던 운영체제는 사용자의 버튼 누름을 감지하고 관련 데이터(버튼을 얼마나 오래 누르는지 등)를 수집한다.

사용자의 액션이 끝나면 운영체제는 수집한 데이터를 바탕으로 자바스크립트에게 명령을 내리기 위해서 사내 메신저를 이용하는데 여기서 사내 메신저는 자바스크립트와 운영체제의 대화의 매개체로 React-native에서는 Bridge라고 칭한다.

명령을 받은 자바스크립트(코드)는 전달받은 데이터를 통해 native method나 UI 업데이트에 필요한 로직을 호출한다. 여기서 App 화면에 보이는 UI는 React-native가 아닌 운영체제가 통제하기 때문에 자바스크립트가 수행한 작업의 결과를 운영체제에 전달해야 한다.

자바스크립트는 메신저를 통해 운영체제에 다음과 같이 업데이트하라고 명령하고 최종적으로 운영체제는 UI를 업데이트한다.

flow
- 운영체제 ▶︎ Bridge ▶︎ 자바스크립트 ▶︎ Bridge ▶︎ 운영체제

결론

React-native에서 자바스크립트는 개발자들이 운영체제와 메시지를 주고받기 위해 사용하는 레이어일 뿐이며 그렇기 때문에 브라우저는 없는 것이다.

결국 아카이빙에 눈이 멀어 긴 시간을 글 작성에 투자해버렸다.

React-native도 내 기술 스택으로 자신 있게 기입할 수 있는 그날까지...

refer

- https://velog.io/@wook4506/React-Native-React-Native%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9E%91%EB%8F%99%ED%95%A0%EA%B9%8C

- https://nomadcoders.co/react-native-for-beginners/lectures/3115