숨고의 React Native 엔지니어들이 생태계 전반의 유용하고 흥미로운 소식들을 소개합니다.
숨고 React Native 뉴스레터
#18

숨고의 React Native 엔지니어들이 생태계 전반의 유용하고 흥미로운 소식들을 소개합니다.

💡 Insight
Expo SDK 53이 4월 30일 공식 출시 되었습니다. 아래는 주요 변경 사항입니다.
  • React Native 0.79 및 React 19: 최신 React Native와 React 버전이 포함되어 있어 새로운 기능과 성능 향상을 제공합니다. React Server Function과 Owner Stack 같은 실험적 기능들을 opt-in 하여 사용해 볼 수도 있습니다.
  • New Architecture 기본 적용: opt-out이 가능하지만, Expo는 대부분의 프로젝트에서 이를 채택하는 것을 권장합니다.
  • Android의 Edge-to-Edge 레이아웃 기본 활성화: Android 16(API 36)을 타게팅하는 앱에 강제되는 edge-to-edge 레이아웃을 선택적으로 적용할 수 있습니다. 새로운 프로젝트에서는 기본 활성화됩니다.
  • 새로운 백그라운드 작업 모듈 expo-background-task 도입: 이 모듈은 최신 API인 WorkManager(Android)와 BGTaskScheduler(iOS)를 활용하여 기존 백그라운드 작업 모듈을 대체합니다.
  • expo-audio의 안정화 버전 출시: 이전의 expo-av를 대체하는 expo-audio가 안정화되어 더 나은 성능과 사용성을 제공합니다.
  • expo-maps 알파 버전 출시: iOS/Android 플랫폼의 추상화된 API를 제공하기 위해 iOS는 SwiftUI를 사용해 애플 지도를, Android는 Jetpack Compose를 사용해 구글 지도를 표현합니다. (iOS 17 이상 요구)
  • Metro 번들러에서 package.json의 exports 필드 기본 활성화: ES 모듈 지원을 강화하기 위해 Metro 번들러에서 exports 필드가 기본으로 활성화되었습니다.
2025년 4월 17일, React Native 공식 웹사이트에 Versioning Policy 페이지가 새롭게 추가되었습니다. 그간 별도의 Github repository에 적혀있었으나 공식 문서에 추가되면서 개발자들에게 더욱 명확한 가이드라인을 제공하도록 개선됐습니다. 이번 문서는 그동안 개발 생태계에서 종종 제기되던 "React Native는 아직 1.0 이전의 실험적 프레임워크" 라는 오해를 일부 해소할 수 있는 근거가 될 것으로 기대됩니다.
  • 버전 형식: 0.x.y 체계를 사용하며, x는 기능 추가/변경 및 Breaking Changes, y는 버그 수정(패치)를 의미
  • 지원 범위: 최신 3개의 마이너 버전(예: 0.76.x, 0.77.x, 0.78.x)까지만 공식 지원
  • Breaking Changes 정의: API의 하위 호환되지 않는 변경, 최소 플랫폼 버전 상향, 런타임/동작의 중대한 변화, 개발 경험의 중대한 변화 등
    • 또한, Breaking Change가 아닌 경우의 예시도 기재됐습니다. (unstable API의 변경, 공개 API가 아닌 프레임워크 내부 API 변화 등)
    • API deprecation이 선언되더라도 최소한 다음 안정 버전까지는 사용할 수 있습니다. (예를 들어, 0.76에 deprecate 되었다면 0.78 이전에는 삭제되지 않습니다. 상황에 따라 더 오래 유지될 수도 있습니다.)
글 내용에 따르면, react-native-svg는 정적인 SVG 그래픽을 렌더하기엔 성능을 낭비하는 편입니다. 그래픽 구성 요소들을 모두 리액트 컴포넌트로 만들지만, Memoization/Caching을 수행하지 않습니다. 또한 네이티브 레벨에서도 구성 요소들이 개별적인 뷰로 구성되어 UI 계산 비용이 늘어납니다.
사용 사례에 따라서 이러한 단점을 제거할 수 있는 대안들이 있습니다. 예를 들어, 애니메이션이 불필요하고 단순한 SVG를 렌더 하는 데엔 expo-image를 사용하거나, react-native-vector-image를 사용해 svg를 네이티브 애셋으로 변환하여 사용하는 방법을 추천합니다. 그밖에 다른 대안들도 소개하고 있는데 각각의 트레이드 오프가 존재하며 현재로써는 완벽한 솔루션이 없습니다.
25년 6월 출시로 예상되는 Android 16의 기능들, 변경 사항들을 정리한 공식 문서입니다. 일부분을 소개해 드립니다.
  • 적응형 레이아웃: Android 16을 타게팅하는 앱은 화면 폭 600dp 이상인 기기에서 화면 방향, 가로세로 비율, 크기 조절 가능성을 제한하는 매니페스트 속성과 런타임 API를 무시함
  • 사진 선택 도구 개선: 뷰 계층 구조에 사진 선택기를 삽입할 수 있게 개선하는 새로운 API 추가 등
  • 진행률 중심 알림: Notification에 사용자 여정의 마일스톤을 단계로 나타내 전체 여정의 진행률을 표현할 수 있음
  • 16KB 페이지 크기 호환성 모드: 4KB 메모리 페이지용으로 빌드된 일부 앱이 16KB 메모리 페이지용으로 구성된 기기에서 실행될 수 있는 호환성 모드 추가
React Native 내장 DevTools에 네트워크 검사 기능을 추가하기 위해 활발히 작업 중입니다. React Native 0.81 버전에 포함하는 것으로 잠정 예정되어 있습니다.
react-native-executorch의 0.3.0 버전에 영문 OCR 기능이 추가되었습니다. 이 글은 OCR 기능을 통합하면서 겪은 기술적 시행착오와 해결 방법을 설명합니다. 모바일 기기의 컴퓨팅 성능과 자원의 제약을 고려하여 반복 실험을 통해 이미지 해상도를 결정하고, 인식된 문자열들의 그룹화 알고리즘을 고안하여 EasyOCR을 그냥 사용한 것보다 효율적인 결과를 만들었습니다. 내장된 OCR 기능의 문서는 🔗 이곳에서 확인하실 수 있습니다. 0.4.0 버전에서 다양한 언어를 지원할 예정이라고 합니다.
📂 Library

훌륭한 성능으로 FlatList의 대체재로 주목받고 있는 legend-list가 베타버전을 거쳐 1.0.0 버전을 출시했습니다. FlatList, FlashList와의 비교 영상은 🔗 레딧에서 보실 수 있습니다.

JS 구현체로 다시 작성되었고 기존보다 향상된 성능, 정확성, 사용 편의성을 제공합니다. 아이템 사이즈의 추정치를 전달할 필요가 없어졌습니다. New Architecture만 지원합니다.
애플 기기의 PIP UI를 따라 만든 PIP View 컴포넌트입니다. 제스쳐를 통해 확대/축소하거나 화면 경계 바깥으로 뷰를 숨기는 동작을 그대로 구현했습니다.
SwiftUI 구성요소를 사용하는 네이티브 UI 컴포넌트 라이브러리입니다. 스타일을 변경할 수는 없지만 iOS 네이티브 앱 경험을 선사합니다.
Metro 번들러를 사용하는 모노레포 React Native 프로젝트에서 Metro 설정을 쉽게 도와줍니다.
Expo 빌드 캐시를 클라우드 대신 로컬에 저장해 운영하게 해주는 Expo CLI 플러그인입니다. Expo SDK 53 이상을 요구합니다.
React Native를 iOS/Android 네이티브 앱 화면에 쉽게 통합하도록 도와줍니다. 라이브러리를 소개하는 블로그 글도 게시되었습니다. (🔗 링크)
Metro 번들러를 위한 Module Federation 구현 작업이 진행되고 있습니다. 간단한 프로토타입 데모 영상을 🔗 X 게시글에서 보실 수 있습니다.
다양한 그래픽 기능을 제공하는 React Native Skia 2.0 버전이 출시되었습니다. React 19 및 React Native 0.79 이상을 요구합니다.
🧰 Tool
지난 호에 소개해 드렸던 Callstack의 엔터프라이즈 프레임워크가 오픈소스로 공개됐습니다.
이번 소식이 유용하다면? 다음 소식도 받아보세요! 😊

(주)브레이브모바일 / techmobile@soomgo.com
서울특별시 강남구 테헤란로 133, 11-12층 (역삼동, 한국타이어빌딩)
stibee

이 메일은 스티비로 만들었습니다