리액트네이티브 0.76 출시(RN브릿지리스아키텍쳐) | 퀘스트에 참여하세요

렛플은 리액트네이티브로 앱을 제공하고 있습니다.

작년 11월쯤에 리액트 네이티브를 0.73.x 버전으로 올린다음에 1년이 되니, 벌써 0.76버전이 나와버렸네요

그만큼 유지보수나 업데이트가 잘 된다는 것을 반증하기는 하는데

버전이 뒤처지면, 나중에 기술부채가 엄청 쌓여서 고생을 하긴 합니다.

(Breaking Change) 이번에 0.76버전이 24년 10월말에 나왔습니다.

항상 문제가 됬던 것은 자바스크립트와 네이티브를 이어주는 브릿지 인터페이스였습니다.

이것을 조금씩 바꾸면서 0.76버전부터는 완전히 교체했습니다.

0.74,0.75 버전의 경우, 0.73의 개선이라고 한다면,

0.76버전은 기존까지 적용했던것의 완전한 적용이라고 보시면 되겠습니다.

뉴 아키텍쳐에서는 진짜 브릿지 인터페이스를 없애버리게 됩니다.

중간중간 바꿔나가면서 0.76버전은 완전히 들어낸것 같습니다.

기존(0.73)에는 시험적으로 브릿지를 일부 적용하거나 실험적으로 적용하기 시작했는데요.

0.76버전부터는 아예 브릿지를 버리게 되면서, 아예 직접 연결을 해버리는 개선사항이 있습니다.

새로운 아키텍쳐(뉴아키텍쳐)는 아예 새롭게 만든것 같습니다.

이미 페이스북과 인스타그램에서 일부 검증을 완료한것으로 보입니다.

(기존)

구형 아키텍처에서는 React Native가 비동기 브리지를 사용하여 네이티브 플랫폼과 통신했습니다.

컴포넌트를 렌더링하거나 네이티브 함수를 호출하기 위해, React Native는 브리지와 함께 네이티브 함수 호출을 직렬화하고 대기열에 추가해야 했으며, 이는 비동기적으로 처리되었습니다.

이러한 아키텍처의 이점은 모든 작업이 백그라운드 스레드에서 수행되기 때문에 메인 스레드가 렌더링 업데이트나 네이티브 모듈 함수 호출로 차단되지 않는다는 점입니다.

(신규)

2. 1) 새로운 네이티브 모듈 시스템

4. 새로운 모듈 시스템은 React Native 렌더러가 네이티브 레이어에 동기적으로 접근할 수 있도록 하여 이벤트를 처리하고, 업데이트를 예약하며, 레이아웃을 비동기적으로 및 동기적으로 읽을 수 있게 합니다. 새로운 네이티브 모듈은 기본적으로 지연 로드되며, 앱에 상당한 성능 이점을 제공합니다.

1. 2) 새로운 렌더링

2. 새로운 렌더러는 여러 스레드에서 진행 중인 여러 트리를 처리할 수 있어 React가 메인 스레드 또는 백그라운드 스레드에서 여러 동시 업데이트 우선순위를 처리할 수 있도록 합니다. 또한 레이아웃을 여러 스레드에서 동기적 또는 비동기적으로 읽는 것을 지원하여, 더 응답성이 좋은 UI를 제공할 수 있습니다.

4. 3) 개선된 이벤트 처리

5. 새로운 이벤트 루프는 JavaScript 스레드에서 작업을 잘 정의된 순서로 처리할 수 있게 합니다.

6. 이는 React가 렌더링을 중단하고 이벤트를 처리할 수 있도록 하여 긴급 사용자 이벤트가 더 낮은 우선순위의 UI 전환보다 우선시될 수 있게 합니다.

7. 마지막으로, 브리지를 제거함으로써 빠른 시작과 JavaScript와 네이티브 런타임 간의 직접 통신이 가능해져

8. 작업 전환 비용이 최소화됩니다.

10. 또한, 이는 더 나은 오류 보고, 디버깅, 정의되지 않은 동작으로 인한 충돌을 줄이는 데 기여합니다.

12. 4) 브리지 제거(브릿지리스)

새로운 아키텍처는 이제 프로덕션에서 사용할 준비가 되어 있습니다.

현재 메타의 Facebook 앱과 다른 제품에서 대규모로 사용되고 있습니다.

우리는 Quest 장치를 위해 개발한 Facebook 및 Instagram 앱에서 React Native와 새로운 아키텍처를 성공적으로 사용했습니다.

안드로이드 앱의 크기가 20% 감소 시작시간이 8% 증가 등

저희도 11월에 신규 버전을 기반으로 , 다시 빌드해보려고 합니다.

이후에 다시 어느정도 개선됬는지 한번 적어보도록 하겠습니다.