GN⁺: React Native, 0.76부터 New Architecture 적용

• React Native 0.76 버전이 npm에 출시되었음. 이 버전은 새로운 아키텍처를 기본으로 포함하고 있으며, 최신 React 기능을 완벽하게 지원함.
• 새로운 아키텍처는 Suspense, Transitions, 자동 배칭, useLayoutEffect 등의 기능을 지원하며, 네이티브 모듈과 컴포넌트 시스템을 새롭게 도입하여 타입 안전한 코드 작성이 가능해짐.
• 2018년부터 React Native를 근본적으로 재작성한 결과물이며, 대부분의 앱이 점진적으로 새로운 아키텍처로 전환할 수 있도록 설계되었음.
• React Native 0.76은 대부분의 앱이 기존 릴리스와 동일한 수준의 노력으로 채택할 수 있으며, 인기 있는 라이브러리들은 이미 새로운 아키텍처를 지원함.

새로운 아키텍처란?

• 새로운 아키텍처는 React Native의 주요 시스템을 완전히 재작성한 것으로, 컴포넌트 렌더링, JavaScript와 네이티브 추상화 간의 통신, 스레드 간 작업 스케줄링 방식을 포함함.
• 이전 아키텍처는 비동기 브리지를 통해 네이티브 플랫폼과 통신했으나, 새로운 아키텍처는 동기 및 비동기 업데이트를 모두 지원하도록 설계됨.
• 새로운 아키텍처는 네이티브 모듈 시스템, 새로운 렌더러, 이벤트 루프, 브리지 제거의 네 가지 주요 부분으로 구성됨.

새로운 네이티브 모듈

• C++로 작성되어 새로운 기능 제공
  • 네이티브 런타임과의 동기식 통신 가능
  • 자바스크립트와 네이티브 코드 간 타입 안전성 제공
  • 플랫폼 간 코드 공유 가능
  • 기본적으로 lazy module loading 제공
• 자바스크립트/타입스크립트 API에서 C++ 네이티브 구현의 모든 기능 활용 가능
• Codegen으로 강력한 타입 계약 정의 가능
• 모듈이 필요할 때만 메모리에 로드되어 앱 시작 시간 단축

새로운 렌더러

• C++로 재작성되어 다음 이점 제공:
  • 다른 스레드에서 다른 우선순위로 업데이트 렌더링 가능
  • 다른 스레드에서 동기식으로 레이아웃 읽기 가능
  • 모든 플랫폼에서 공유되는 C++ 코드
• 이제 뷰 계층이 변경 불가능한 트리 구조로 저장됨
  • 스레드 안전한 업데이트 처리 가능
  • 사용자 인터페이스의 서로 다른 버전을 나타내는 여러 진행 중 트리 처리 가능
• 낮은 우선순위 업데이트 중단하고 사용자 입력 등 긴급한 것 렌더링한 후 낮은 우선순위 업데이트 재개 가능

이벤트 루프

• 새로운 아키텍처는 명확한 이벤트 루프 처리 모델을 구현하여 React DOM과 React Native 간의 차이를 줄임.
  • 자바스크립트 스레드에서 작업을 처리하는 잘 정의된 이벤트 루프 프로세싱 모델 구현
• 이벤트 루프는 업데이트와 이벤트를 예측 가능하게 정렬하여, 낮은 우선순위 업데이트를 긴급 사용자 이벤트로 중단할 수 있음.
• 웹사양과 더 잘 맞춰짐
• 향후 더 많은 브라우저 기능의 기반이 될 것임

브리지 제거

• 새로운 아키텍처는 브리지를 제거하여 JavaScript와 네이티브 코드 간의 직접적이고 효율적인 통신을 가능하게 함.
• 브리지 제거로 인해 시작 시간이 개선되고, 정의되지 않은 동작으로 인한 크래시 감소, 오류 보고 및 디버깅이 용이해짐.

새로운 기능

• Transitions
  • React 18의 새로운 개념인 Transitions는 긴급 업데이트와 비긴급 업데이트를 구분함.
  • 긴급 업데이트는 즉각적인 반응이 필요하며, Transitions 업데이트는 UI를 한 뷰에서 다른 뷰로 전환함.
• Automatic batching 은 더 많은 상태 업데이트를 함께 배치하여 중간 상태 렌더링을 피하고, React Native를 더 빠르고 지연 없이 작동하게 함.
• 새로운 아키텍처는 useLayoutEffect를 통해 레이아웃 정보를 동기적으로 읽고 UI를 같은 프레임에서 업데이트할 수 있도록 지원함.
• 새로운 아키텍처는 React 18에서 도입된 Suspense를 완전히 지원하여, 로딩 상태를 처리하고 사용자 입력에 높은 우선순위를 부여함.

업그레이드 방법

• 0.76으로 업그레이드할 때 대부분의 앱은 인터롭 레이어 덕분에 다른 릴리스와 동일한 노력으로 가능함
• 그러나 New Architecture 및 concurrent 기능을 완전히 활용하려면 커스텀 네이티브 모듈과 컴포넌트를 마이그레이션해야 함
• 앱 개발자의 경우
  • 라이브러리, 커스텀 네이티브 컴포넌트 및 커스텀 네이티브 모듈을 New Architecture를 완벽히 지원하도록 업그레이드 필요
  • 인기 리액트 네이티브 라이브러리 대부분이 New Architecture 지원하도록 협력했음
• 라이브러리 관리자의 경우 새로운 네이티브 모듈 및 컴포넌트 API로 라이브러리 마이그레이션할 것을 권장

GN⁺의 정리

• New Architecture로의 전환은 리액트 네이티브 개발에 있어 중요한 이정표가 될 것 같음. 동기/비동기 업데이트 모두 가능해지고, 브리지 병목 현상이 해결되며, 레이아웃을 다른 스레드에서 읽을 수 있게 되는 등 성능 및 사용자 경험 측면에서 많은 개선이 있을 것으로 보임
• 특히 React 18의 Concurrent 기능을 완벽 지원하게 된 것도 주목할 만한 점. Suspense, Transition 등을 활용해 더욱 반응성 높고 자연스러운 UX를 만들 수 있게 될 것임
• 다만 기존 앱과 라이브러리들은 New Architecture를 완전히 지원하기 위해 마이그레이션 작업이 필요할 것으로 보임. 단계적으로 진행해야 하겠지만, 마이그레이션이 완료되면 New Architecture의 장점을 충분히 누릴 수 있을 것임
• 이 아키텍처는 Meta의 Facebook 앱과 Instagram 앱에서 이미 사용되고 있으며, Expensify, Kraken, BlueSky 등의 성공 사례가 있음
• 전반적으로 New Architecture는 리액트 네이티브의 미래를 위한 큰 진전이라 생각함. 커뮤니티의 협력으로 잘 안착되길 기대해봄