React 네이티브 프레임워크란 무엇이며 어떻게 작동합니까?
게시 됨: 2022-07-08React Native는 플랫폼 간 앱 개발에 가장 선호되는 프레임워크 중 하나이며 Facebook, Instagram, Skype Microsoft, Tesla, Shopify, Walmart 및 UberEats를 비롯한 여러 업계 거물에서 채택했습니다. 이 프레임워크는 React.js의 한계를 해결하기 위해 Facebook 팀에서 만들었습니다.
Facebook에서 개발한 SDK React는 웹 앱 구축을 위한 실행 가능한 옵션이었습니다. 그러나 Facebook이 모바일 우선 전략을 채택했을 때 웹 앱은 모바일 플랫폼에 렌더링되어야 했습니다. 이 작업은 정말 도전적이었습니다! 처음에 Facebook 엔지니어들은 HTML5를 사용하여 모바일 웹에서 앱을 렌더링했지만 이 전략은 실패했습니다. 그 후 그들은 모바일 네이티브 컨테이너 내에 WebView를 포함시켰습니다. 이 접근 방식도 제스처 및 터치 이벤트, 키보드 API 및 이미지 관리 기능과 같은 필수 속성이 없기 때문에 작동하지 않았습니다.
그런 다음 그들은 완벽한 UX를 제공하기 위해 기본 앱을 빌드해야 할 필요성을 깨달았습니다. 그러나 Android 및 iOS용 기본 앱을 별도로 구축하려는 아이디어에는 필수 코딩 프로세스, 다양한 플랫폼을 위한 별도의 코드베이스, 각 앱의 프로토타입이 Playstore의 사전 승인을 필요로 하는 느린 반복 프로세스와 같은 장애물이 포함되었습니다.
마침내 페이스북은 내부 해커톤을 진행했고, 리액트의 개선된 버전인 리액트 네이티브가 만들어졌다. React Native 프레임워크는 2015년 모바일 앱 개발을 위한 원스톱 솔루션으로 출시되어 같은 해에 오픈소스화되었습니다. 프레임워크와 그 기능에 대해 더 자세히 알아보자!
React Native: 개요
React Native는 Android 및 iOS 운영 체제용으로 기본적으로 렌더링된 모바일 애플리케이션을 만드는 데 사용되는 JavaScript 기반 모바일 앱 개발 프레임워크입니다. React Native의 고유한 판매 포인트는 개발자가 단일 코드베이스를 사용하여 두 플랫폼에 대한 앱을 동시에 빌드할 수 있다는 사실에 있습니다. 프레임워크는 JS 코드를 기본 구성 요소로 컴파일하여 플랫폼별 모듈 및 API를 사용합니다. 따라서 React Native 개발자는 Text, View 및 Images와 같은 기본 구성 요소를 새 구성 요소를 만들기 위한 빌딩 블록으로 사용할 수 있습니다.
React Native는 React와 어떻게 다릅니까?
React Native는 UI 개발에 사용되는 Facebook에서 개발한 JS 라이브러리인 웹용 React를 기반으로 합니다. 그러나 React는 브라우저를 대상으로 하는 반면 React Native는 모바일 앱 플랫폼을 대상으로 합니다. 따라서 모바일 앱 개발자는 기본과 유사한 모양과 느낌의 모바일 앱을 만들기 위해 알려진 JavaScript 라이브러리를 사용하는 편리함을 즐깁니다.
React Native는 웹에서 사용되는 span 프리미티브 대신 Text 프리미티브를 사용합니다. 이 텍스트는 Android 앱용 기본 TextView와 iOS 앱용 기본 iOS UIView를 생성합니다. 이러한 이유로 앱 개발에 JavaScript를 사용했음에도 불구하고 최종 애플리케이션은 모바일 앱의 셸에 내장된 웹 앱이 아니라 실제 네이티브인 모바일 앱입니다.
React Native 앱은 React 앱과 마찬가지로 JavaScript와 XML-esque 마크업의 조합인 JSX를 사용하여 생성됩니다. 차이점은 React Native가 기본 렌더링 API를 호출하기 위해 후드 아래에서 "브리지"를 사용한다는 것입니다. 여기서 iOS 앱의 UI 구성 요소를 렌더링하는 데 Objective-C/Swift API가 사용되며 Android 앱의 경우 Java/Kotlin API가 사용됩니다. 간단히 말해 브리지는 JS 코드를 플랫폼별 구성 요소로 변환합니다. 결과적으로 앱은 웹 보기 대신 실제 모바일 UI 구성 요소를 렌더링합니다. 모바일 앱의 모양과 느낌을 전달합니다. 또한 React Native는 플랫폼 API에 대한 JS 인터페이스를 노출합니다. 이를 통해 앱은 사용자의 현재 위치, 카메라 등과 같은 스마트폰 장치 기능에 액세스할 수 있습니다.
React Native Apps는 어떻게 작동합니까?
React Native 앱은 네이티브 코드, JavaScript 코드 및 브리지의 세 부분으로 분리됩니다. 브리지는 네이티브 플랫폼에서 실행하기 위해 JS 코드를 해석하고 네이티브 요소와 JS 코드 간의 비동기 통신을 가능하게 합니다.
React Native 애플리케이션의 기능과 관련된 중요한 스레드
메인(네이티브) 스레드: 네이티브 스레드라고도 하는 메인 스레드는 iOS 및 Android 애플리케이션에서 UI 렌더링에 사용됩니다. UI 요소를 표시하는 작업을 관리하고 사용자의 제스처를 처리합니다.
JavaScript 쓰레드: JS 쓰레드는 기본적으로 앱의 비즈니스 로직을 다루며 UI 기능 뿐만 아니라 구조를 정의합니다. JS 스레드의 기능에는 별도의 JS 엔진 내에서 JS 코드 실행, API 호출, 터치 이벤트 처리 등이 포함됩니다.
섀도우 스레드(섀도우 트리): 이 스레드는 섀도우 노드를 생성하고 알고리즘을 사용하여 레이아웃 업데이트를 정확한 데이터로 변환하고 UI 이벤트를 올바르게 직렬화된 페이로드로 변환하는 수학 엔진 역할을 합니다.
네이티브 모듈 스레드: 애플리케이션이 플랫폼 API에 액세스해야 할 때마다 프로세스는 네이티브 모듈 스레드에서 발생합니다.
Customs Native Module 스레드: 이러한 스레드는 사용자 지정 모듈을 사용할 때 앱의 성능을 가속화하는 데 사용됩니다. 예를 들어 React Native는 이 작업이 JS 스레드에서 오프로드되도록 별도의 기본 스레드를 사용하여 애니메이션을 처리합니다.
위에서 언급한 스레드 중 React Native 앱이 작동하는 데 도움이 되는 가장 중요한 스레드는 Native 스레드와 JS 스레드입니다. 흥미롭게도 이 두 스레드 사이에는 직접적인 통신이 없으므로 서로 차단하지 않습니다.
React Native 앱의 기능: 중요한 단계
React Native 앱이 어떻게 작동하는지 확인하세요!
1 단계
앱이 시작되면 네이티브 스레드가 앱을 로드하고 JS 코드를 실행하기 위한 JavaScript 스레드를 생성합니다. 네이티브 스레드는 터치, 누르기 등의 UI 이벤트를 수신하고 이러한 이벤트를 React 네이티브 브리지를 통해 JS 스레드에 전달합니다.
2 단계
JavaScript가 로드되고 JS 스레드는 화면에 렌더링되어야 하는 내용에 대한 정보를 그림자 스레드에 보냅니다. 그런 다음 섀도우 스레드는 알고리즘을 사용하여 레이아웃을 계산하고 뷰 위치를 계산하는 방법을 결정합니다. 그런 다음 섀도우 스레드는 뷰를 렌더링하기 위해 레이아웃 매개변수를 기본 스레드에 전달합니다. )
3단계
메인 스레드는 UI 이벤트를 수집하고 이를 섀도우 스레드로 보냅니다. 이벤트는 직렬화된 페이로드로 변환되어 JS 스레드로 전송됩니다.
4단계
JavaScript 스레드는 이제 페이로드를 처리한 다음 UI를 업데이트하거나 기본 메서드를 호출합니다.
2단계, 3단계, 4단계는 JavaScript의 이벤트 루프가 반복될 때마다 계속 반복됩니다.
JS 스레드의 모든 이벤트 루프가 완료된 후 기본 측에서는 기본 보기에 대한 일괄 업데이트를 수신합니다. 그런 다음 네이티브 스레드에서 실행됩니다. 앱 성능을 유지하려면 다음 프레임의 렌더링 마감 기한 전에 JS 스레드에서 기본 스레드로 일괄 업데이트를 보내야 합니다. JS 이벤트 루프의 복잡한 처리로 인한 느린 JS 스레드는 UI를 방해합니다. 느린 JS 스레드가 성능에 영향을 주지 않는 유일한 예외는 네이티브 보기가 네이티브 스레드에서 완전히 발생하는 시나리오입니다.
React Native Bridge는 스레드 간의 원활한 상호 작용을 어떻게 보장합니까?
React Native Bridge는 한 스레드가 다른 스레드를 차단하지 않도록 스레드 간의 비동기 통신을 허용합니다. 또한 메시지는 일괄 처리됩니다. 메시지는 최적화된 방식으로 스레드 간에 전송됩니다. 또한 브리지는 두 스레드가 동일한 데이터를 공유하거나 동일한 데이터를 사용하여 작동하지 않도록 메시지를 직렬화합니다.
React Native App 개발 환경을 설정하는 방법은 무엇입니까?
Expo의 도움으로 React Native 앱을 만들기 위한 환경을 설정하는 방법은 다음과 같습니다.
- Node.js를 설치하고 Expo의 명령줄 도구를 가져온 다음 npm install Expo-cli –global 명령을 입력합니다. Expo cli 도구가 설치되면 expo init todo-app을 입력합니다.
- 이제 화면이 표시되고 빈 앱에 대해 "비어 있음" 옵션을 선택해야 합니다. Expo의 워크플로 기능도 포함합니다. 그런 다음 앱 이름을 입력하고 Enter 키를 누른 다음 설정 프로세스를 계속합니다.
- npm start 명령으로 앱을 시작하기 위해 생성된 새 프로젝트로 이동하고 앱을 중지하려면 Cntrl + C를 눌러야 합니다. 개발자 서버가 실행되고 Expo 관리자 화면이 있는 새 탭이 웹 브라우저에서 열립니다.
앱은 Android 에뮬레이터에서 실행하거나 휴대폰에 Expo 앱을 설치하고 QR 코드를 스캔하여 기기에서 앱을 실행하여 미리 볼 수 있습니다. 그런 다음 Atom, Sublime, Visual Studio Code 등과 같은 텍스트 편집기를 설치해야 합니다. 이제 React Native 앱을 만드는 데 필요한 모든 도구가 있습니다.
최종 평결
React Native는 Android 및 iOS 운영 체제를 대상으로 하는 모바일 앱을 빌드해야 하는 경우 선택할 수 있는 수익성 있는 옵션입니다. React Native를 사용한 크로스 플랫폼 개발은 개발 속도를 높이고 개발 비용을 줄입니다. 따라서 이 프레임워크는 앱 아이디어를 검증하기 위한 빠른 앱 프로토타입을 구축하려는 기업가에게 가장 적합합니다.
React Native 앱 개발에 대한 기술 지원 및 전문가 지침이 필요하십니까? 미국과 인도에서 경험이 풍부한 React Native 개발 회사인 Biz4Solutions에 연락하여 전 세계 고객에게 세계적 수준의 서비스를 제공하십시오.