GN⁺: React Native, 0.76부터 New Architecture 적용
(reactnative.dev)- 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는 리액트 네이티브의 미래를 위한 큰 진전이라 생각함. 커뮤니티의 협력으로 잘 안착되길 기대해봄
리액티브 네이티브를 처음 들어본 것도 무척 옛날 일인 것 같은데. 페북에서 시작됐음에도 아직 1버전이 안 됐다는 게 오히려 놀랍네요..
RN을 한번도 써본적이 없어 궁금한데 느낌 상 android에 최적화가 되어있을 것 같은데 실제로는 iOS에서 성능이 더 잘 나온다는게 신기하네요.
Hacker News 의견
-
React Native 앱과 백엔드 API를 4년간 개발한 경험이 있으며, Expo로의 이전은 많은 문제를 해결했지만 여전히 버그가 존재함. iOS는 Android보다 안정적이며 성능도 뛰어남. React Native는 배우기 쉽고 큰 JS 생태계를 가지고 있어 추천할 만하지만, 현재는 Flutter를 사용 중임
-
React Native에 대한 다양한 의견이 존재하며, 일부는 Expo에 불만을 제기하고 Kotlin Multiplatform을 추천함. Hacker News의 논의가 점점 무의미해지고 있다는 의견도 있음
-
Flutter 개발자로서 Swift UI와 Compose가 모바일 개발에 더 적합하다고 생각하며, 새로운 앱을 시작할 때는 Flutter나 React Native를 사용하지 않을 것임
-
React Native는 iOS에서는 괜찮지만 Android에서는 느림. Hermes는 흥미롭지만 여전히 많은 폴리필이 필요함. 웹이 React Native를 대체할 날을 기대함
-
Expo/RN을 사용하여 Bluesky를 개발 중이며, 새로운 아키텍처에 대한 초기 테스트에서 Android 성능이 향상됨
-
React Native를 Expo와 함께 사용할 때 긍정적인 경험을 했으며, 단독 개발자로서 RN이 많은 것을 가능하게 해줌. 새로운 아키텍처를 기대 중임
-
Flutter의 렌더링 속도가 React Native보다 5배 빠르며, 웹에서 React를 사용할 때 속도가 더 빠름
-
Capacitor가 NextJS 웹앱 포팅에 유용하다는 트윗을 봄
-
React Native가 올해 들어 상당히 좋아졌으며, react-strict-dom이 준비되면 큰 변화를 가져올 것임