React Native 0.76에서 변경된 기능들

1. 서론

 React Native 0.76부터 새로운 Architecture가 기본으로 활성화되었다. 이 글에서는 React Native 0.76의 새로운 기능과 주요 변화 사항을 소개하겠다.

2. 새로운 Architecture의 등장

 React Native의 새로운 Architecture는 기존 아키텍처의 문제를 해결하고, React 18의 기능을 완벽하게 지원할 수 있도록 설계되었다. react 18에서 그랬듯이, react native 0.76의 핵심 주제도 concurrent인 것 같다. 기존 아키텍처는 bridge를 통해 JavaScript와 네이티브 플랫폼 간의 통신을 비동기적으로 처리했다. 이 방식은 메인 스레드의 부하를 줄이는 데는 효과적이었지만, 비동기 처리만 가능했기 때문에 사용자 입력에 대한 즉각적인 반응을 보장하기 어려웠다.

 새로운 Architecture에서는 비동기 처리에만 의존하지 않고, 동기와 비동기 업데이트 모두를 지원함으로써 사용자 interaction에 더욱 빠르게 반응할 수 있다. 또한, JavaScript와 네이티브 레이어 간의 직렬화 및 통신의 병목을 줄여, 더 높은 성능을 보장한다.

3. 새로운 Module System

 새로운 Module System은 JavaScript와 네이티브 플랫폼 간의 통신 방식을 완전히 재설계한 시스템이다. 이 시스템은 C++로 작성되었으며, 다음과 같은 주요 기능을 제공한다:

 

• 동기 접근성 제공: 이제 JavaScript와 네이티브 레이어가 동기적으로 데이터를 주고받을 수 있다.

• 타입 안전성: JavaScript와 네이티브 코드 간의 타입 안전성을 보장하여 코드의 안정성을 높인다.

• 코드 공유: 여러 플랫폼 간에 코드를 공유할 수 있어 개발 효율을 높인다.

• Lazy 로딩: 모듈이 실제로 필요할 때만 메모리에 로드되므로 앱의 초기 시작 속도가 개선된다.

 

이전 아키텍처에서는 콜백을 사용해 비동기적으로 네이티브 함수의 응답을 처리해야 했지만, 이제는 바로 함수를 호출하고 값을 반환받을 수 있다.

4. 새로운 Renderer

 새로운 Renderer는 기존 렌더링 엔진을 C++로 완전히 재작성하여 플랫폼 간 코드 공유를 가능하게 한다. 새로운 Renderer는 여러 스레드에서 업데이트를 처리하며, 각각의 업데이트 우선순위에 따라 작업을 분배할 수 있다. 이로 인해 UI를 차단하지 않고 백그라운드에서 업데이트를 처리하거나, 사용자 입력에 대해 즉각적으로 반응할 수 있게 되었다.

새로운 Renderer는 또한 view 계층을 immutable tree 구조로 저장하여 thread 간 안전하게 업데이트를 처리할 수 있다. 이를 통해 다양한 버전의 UI를 병렬로 처리할 수 있으며, UI 업데이트  중에도 사용자 입력과 같은 우선순위가 높은 작업을 먼저 처리할 수 있다.

5. Event Loop의 개선

 React Native 0.76에서는 새로운 Event Loop를 도입하여 JavaScript 스레드에서 작업을 체계적으로 처리할 수 있도록 했다. 이 Event Loop는 웹 표준을 따르며, 다양한 우선순위의 작업을 동시 처리하고, 중요한 이벤트가 우선순위가 낮은 UI 업데이트보다 우선 처리될 수 있도록 한다. 이를 통해 React Native 애플리케이션의 작동 방식이 React DOM과 더욱 유사해졌고, 이를 바탕으로 더 나은 코드 호환성과 사용 경험을 제공한다.

 이러한 개선으로 타이머와 같은 작업의 처리 방식이 웹과 유사해져 더 익숙한 개발 경험을 제공하고, 새롭게 추가된 useLayoutEffect와 같은 동기적 레이아웃 정보를 활용할 수 있어 UI를 보다 정확하게 조정할 수 있다. 또한 아직 추가되진 않았지만 MutationObserver와 IntersectionObserver와 같은 브라우저 기능이 추후 추가될 수 있게 되었다.

6. Bridge 제거

 새로운 Architecture에서는 기존의 bridge에 의존하던 방식을 제거하고, JSI(JavaScript Interface)를 통해 JavaScript와 네이티브 코드 간의 직접적인 통신을 구현했다. 이로 인해 애플리케이션의 초기 시작 시간이 단축되었으며, 작업 전환 비용이 줄어들었다. bridge 제거로 인한 또 다른 이점으로는 오류 보고 및 디버깅의 개선이 있으며, 이로 인해 불안정한 동작으로 인한 크래시가 줄어들었다.

7. 추가된 기능들

7.1 Transitions

 react 18에서 추가된 기능이 이제 React native에서도 사용 가능하다. transition을 통해 urgent한 update와 그렇지 않은 update를 분리하여 ui를 업데이트 할 수 있게 되었다. 

7.2 Automatic Batching

 react는 기존에는 event handler 내부에 있는 state들의 Update만 batch되어 처리 되었으나, 18부터 promise, settimeout, 혹은 다른 이벤트 내부의 상태 업데이트들도 batch되도록 변경되었다. react native에서도 이제 이와 같이 상태 업데이트들을 batch하여 한번에 처리한다.

7.3 useLayoutEffect

 이제 react native는 ui를 하나의 thread에서 관리하지 않기에, 기존의 uselayout과는 다르게 이미 렌더링 되어있는 ui로부터 layout을 읽어올 필요 없이, 사용자에게 보여지기 전에 ui의 정보를 가져올 수 있게 되었다.

7.4 Suspense 지원 추가

  react 18에서 추가된 것처럼 react.lazy뿐만 아니라 promise도 catch할 수 있도록 변경되었다.

8.  React Native DevTools 첫번째 Stable 버전 출시

 React Native 0.76에서는 새로운 디버깅 환경인 React Native DevTools가 기본 제공된다. 이는 Chrome DevTools에 기반한 브라우저 스타일의 디버깅 툴로, 더 나은 브레이크포인트 설정, 값 확인, 스택 점검, 풍부한 JavaScript 콘솔 등 직관적인 디버깅 경험을 제공한다. 또한 React DevTools와 통합되어 컴포넌트 검사와 프로파일러를 더욱 원활하게 사용할 수 있다.

9. Metro 빌드 성능 개선

 React Native 0.76에서는 Metro의 모듈 탐색 성능도 대폭 향상되었다. Metro는 15배 더 빠르게 모듈을 탐색할 수 있으며, 이로 인해 전체 빌드 성능이 특히 warm 빌드에서 약 4배 더 빨라졌다.

10. 참고 문헌

• React Native Team. (2024, October 23). Release 0.76 - New Architecture. Retrieved from https://reactnative.dev/blog/2024/10/23/release-0.76-new-architecture#android-apps-are-38mb-smaller-thanks-to-native-library-merging
• React Native Team. (2024, October 23). The New Architecture is Here. Retrieved from https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here