React Native 새로운 아키텍처

React Native가 0.76 버전 출시를 발표했습니다. 이번 업데이트를 통해 이제 새로운 아키텍처가 기본적으로 활성화됩니다. 버전 0.76 이전에는 새로운 아키텍처를 활성화하는 유일한 방법은 선택하는 것이었습니다.

이 블로그에서는 새 아키텍처의 새로운 기능에 중점을 둘 것입니다.

새로운 React Native 아키텍처는 1년 넘게 헤드라인을 장식해 왔으며 그럴 만한 이유가 있습니다. 이 새로운 아키텍처는 '브리지리스'라고도 알려져 있습니다. 왜 브리지리스라고 불리는가? 이 내용은 블로그에서 살펴보겠습니다."

새 아키텍처를 살펴보기 전에 이전 아키텍처를 빠르게 요약해 보겠습니다.

? 오래된 아키텍처 요약

아. JavaScript와 Native라는 두 가지 영역이 있습니다.

ㄴ. 스레드가 3개 있습니다:

• JavaScript 스레드(JavaScript): JavaScript 번들 코드를 담당합니다.
• Main, UI Native Thread : 네이티브 모듈을 담당합니다.
• 그림자 또는 배경 스레드(요가): 레이아웃을 담당합니다.

ㄷ. JavaScript와 네이티브 코드가 서로 통신할 수 있는 유일한 방법은 Bridge를 통하는 것입니다.

디. Button 또는 Alert와 같은 기본 구성 요소는 JavaScript 계층에서 JSON으로 직렬화되어 브리지를 통해 기본 스레드로 전송됩니다. 네이티브 스레드에서 이 JSON은 네이티브(iOS 또는 Android) 구성 요소로 변환됩니다.

e. 네이티브 스레드에서는 네이티브 구성 요소에서 이벤트가 발생하면 브릿지를 통해 해당 이벤트를 JSON으로 JavaScript 스레드에 보냅니다. 이 통신은 비동기식이므로 브리지가 JavaScript와 기본 구성 요소 간의 상호 작용을 촉진할 수 있습니다.

? 오래된 아키텍처의 문제점

JavaScript와 네이티브 레이어 간의 통신은 브리지에 의존하는데, 이는 기존 아키텍처의 주요 제한 사항입니다.

1. 성능 문제

2. 버벅거리거나 빈 프레임

3. 노드 중복

✨ 새로운 건축의 목표

새 아키텍처는 이전 아키텍처의 과제를 해결하는 데 중점을 둡니다. 목표는 다음과 같습니다.

1. 빠른 시작 ?

2. 동시 렌더링 ?️

3. 반응형 앱 ?‍?

4. 다양한 플랫폼 지원?

5. 충돌이 적나요?

6. 더 나은 메모리 관리 ?

7. 동기실행 ?

? 새로운 아키텍처

새 아키텍처는 C로 재작성되어 두 가지 주요 개선 사항을 제공합니다.

아. 브리지 없이 JavaScript와 기본 레이어 간의 직접 통신. 이것이 바로 새로운 아키텍처가 일반적으로 '브리지리스'로 알려진 이유입니다.

베. 여러 플랫폼 지원(플랫폼이 React Native를 사용하는 경우)

---

? 새로운 아키텍처의 구성요소:

1. 자바스크립트 인터페이스(JSI)

JSI는 JavaScript 인터페이스이며 C로 작성된 레이어입니다. 모든 JS 엔진을 사용할 수 있으며 이를 통해 IOS, Android뿐만 아니라 스마트 TV, 스마트 시계 등에서도 크로스 플랫폼 지원이 가능합니다.

JSI를 사용하면 JavaScript가 기본 모듈에 대한 참조를 보유할 수 있습니다. 이를 통해 JavaScript가 네이티브 모듈과 직접 통신할 수 있을 뿐만 아니라 JavaScript와 네이티브 스레드 간의 동기 통신이 가능해집니다

PS: React 네이티브 코드는 Metro를 통해 번들로 제공되어 JSI로 이동합니다.

2. 새로운 기본 모듈

새 네이티브 모듈은 새롭게 개선된 네이티브 모듈입니다. 이는 C로 작성되었으며 JS/TS api에서 Native로의 동기 액세스를 가능하게 합니다. 즉, 브리지 없이 네이티브와 JavaScript 스레드 간에 직접 통신이 가능합니다. C를 사용하면 크로스 플랫폼 공유를 위한 고유한 기본 모듈을 작성할 수도 있습니다.

새로운 기본 모듈을 사용하면 이벤트 처리, 레이아웃 읽기, 비동기 및 동기화 업데이트 예약이 가능합니다.

앞서 배운 것처럼 JSI는 TurboModule의 객체 참조를 유지하므로 JavaScript 코드가 필요할 때만 각 모듈을 로드할 수 있습니다(모듈의 동적 로드). 이는 이전 아키텍처에 비해 앱의 시작 시간을 향상시킵니다.

3. 코드젠

Codegen은 강력한 형식의 계약을 생성하는 도구입니다. 이러한 계약은 개발자의 시간을 절약하고 교차 프로그래밍 언어 간의 의사소통을 더 쉽게 만들어 개발자에게 도움이 됩니다.

React Native에서 JavaScript와 Typescript는 강력한 유형의 언어가 아니지만 C는 강력한 유형의 언어입니다. JavaScript와 C 간의 통신을 만들기 위해 codegen은 인터페이스(유형)를 생성합니다. 이는 런타임 시 빠른 실행을 위해 빌드 시 발생했습니다.

Codegen JSI(JavaScript Interface) 덕분에 별도의 브리지 없이 Turbo 모듈과 직접 통신할 수 있습니다.

4. 새로운 렌더러

새로운 렌더러는 Fabric으로 알려져 있습니다. 이것도 C로 작성되었습니다.
React Native에는 3개의 스레드가 있다는 것을 기억하시나요? - JavaScript, 메인/UI 네이티브, 섀도우/백그라운드 스레드. 이전 아키텍처에서는 메인 스레드가 차단되어 문제가 발생했으며 이로 인해 다음이 발생했습니다.

1. 성능 문제

2. 빈 프레임(60FPS 누락)

3. 또한 기존 아키텍처에서는 노드와 DOM의 2개 복사본을 유지해야 합니다. 이로 인해 메모리 문제가 발생합니다

4. 긴급한 업데이트에 우선순위를 부여하기 위해 우선순위가 낮은 작업을 중단할 방법이 없었습니다.

Fabric에서는 이러한 문제가 해결되었습니다. 이제 새로운 렌더러를 사용하면 전환을 사용하여 긴급한 우선순위가 낮은 작업을 중단할 수 있습니다. 이렇게 하면 앱이 반응하게 되고 기본/UI 기본 스레드가 차단 해제되지 않습니다. 이벤트는 비동기식으로 실행됩니다. 새로운 렌더러 시스템에는 뷰 계층 구조의 불변 트리가 있습니다.

불변이란 변경할 수 없다는 뜻입니다. 불변의 이점:

1. 이렇게 하면 스레드로부터 안전한 업데이트 처리가 가능합니다.

2. 이는 또한 각각 다른 버전의 사용자 인터페이스를 나타내는 진행 중인 여러 트리가 있음을 의미합니다.

3. 다양한 UI 버전에 여러 개의 트리가 있으므로 *UI를 차단하지 않고 백그라운드에서 업데이트를 렌더링할 수 있습니다. *(예: 전환 중) 또는 메인 스레드에서(응답으로) 사용자 입력)

4. 새 렌더러는 레이아웃 정보를 동기적으로 여러 스레드에서 읽을 수도 있습니다. 이를 통해 우선순위가 낮은 업데이트와 필요할 때 동기식 읽기를 위한 백그라운드 계산이 가능해집니다.

---

? 엔드 투 엔드 아키텍처

? 요약

1. 새 아키텍처는 0.76부터 기본적으로 사용 가능

2. 새로운 아키텍처 도입: JSI(JavaScript Interface), 새로운 네이티브 모듈(Turbo 모듈) , codegen, 새로운 렌더러 시스템(원단)

3. JSI는 JavaScript 인터페이스입니다 C를 기반으로 하며 Bridge 없이 JavaScript와 Native 모듈을 직접 통신할 수 있습니다

4. 새 네이티브 모듈은 개선된 현재 네이티브 모듈입니다. C로 작성되었으며 많은 이점을 제공합니다. 브릿지, 지연 로딩 없이 JavaScript 및 네이티브와의 동기 통신이 가능합니다.

5. Codegen은 JavaScript와 C가 서로 통신할 수 있는 유형 인터페이스를 생성합니다.

6. 뉴 렌더러(Fabric)은 C로 작성된 새로운 렌더러 시스템입니다. 이를 통해 다중 스레딩을 활성화하고 우선순위가 낮은 작업을 중단함으로써 더 나은 성능을 얻을 수 있습니다.

7. 새로운 이벤트 루프를 통해 React Native를 DOM에 더욱 가깝게 만듭니다.

8. GitHub 이슈 잘 읽었습니다

즐거운 배움!!

위 내용은 React Native 새로운 아키텍처의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!