#15

이번에도 약 3개월만에 출시되었습니다.

CSS 속성 지원 추가 (New Architecture 활성화 시 사용 가능)

display: ‘contents’ 스타일과 boxSizing: ‘content-box’ 스타일이 추가되어 레이아웃 구성의 자유도가 높아졌습니다. (하위 호환성을 위해 기본값은 그대로 유지됩니다) 또한 mixBlendMode, outline 계열 스타일이 추가되었습니다.

Android 15, 16KB 메모리 페이지 사이즈 지원

Android 15(SDK 35)를 타겟하는 앱에는 edge-to-edge 디스플레이가 강제되는데, 이에 대한 대응 가이드를 공지🔗 했습니다. 한편, Android 15를 기점으로 16KB 메모리 페이지 사이즈를 활성화한 기기의 수가 늘어날 것으로 예상되는 가운데, 이에 대응할 수 있도록 준비를 마쳤다고 합니다.

react-native init 명령어 제거

대신 expo를 사용하거나, @react-native-community/cil의 init 명령을 사용해야 합니다.

Metro의 ‘run on iOS/Android’ 기능 제거

Metro 실행 후 i, a 키를 눌러 각 플랫폼 빌드를 시작하고 완료 후 앱을 실행하는 기능이었습니다.

Swift를 iOS 개발 언어로 채택

main.m, AppDelegate.h, AppDelegate.mm 세 개 파일이 하나의 AppDelegate.swift 파일로 변경됩니다.

단, 프로젝트 내에 C++로 직접 작성한 모듈은 AppDelegate.swift에서 등록이 불가하므로, 이 경우 계속해서 Objective-C++ 구현을 유지해야 합니다.

iOS RCTAppDependencyProvider 추가

third party 의존성을 불러오는 방법이 변경되면서 AppDelegate 구현에 코드를 추가해야 합니다. Upgrade Helper에는 AppDelegate.swift 코드에 이 내용이 반영돼 있지만, Objective-C++ 코드를 유지할 경우 공지 글을 참고하셔서 간단한 코드를 직접 추가해야 합니다.

Metro CLI의 콘솔 로그 출력 제거 (예정)

CLI 출력 대신 React Native DevTools를 통해 로그를 확인하기를 권장합니다. 좋은 소식은, 2025년 들어서 First-party VS Code 지원 작업도 진행 중이라고 합니다.

이 변경점은 0.77.1 버전에서 --client-logs 플래그를 사용하는 방식으로 당분간 계속해서 사용 가능합니다. (PR🔗)

지원 버전 정책을 따라, 0.74 이하 버전에 대한 공식 지원 지원이 종료되었습니다.

Shopify의 5년간 React Native 사용 경험 (GeekNews🔗) 글에 덧붙여 Shopify의 전 CTO가 React Native 도입에 이르기까지 비하인드 스토리를 이야기했습니다. 수년에 걸쳐 오랜 기간 지켜보면서 검토를 반복하는 과정에서 다양한 면모를 고려한 점이 인상적입니다. 짧게 요약하기 어려운 다양한 내용이 담겨있으니 가볍게 읽어보시기를 추천 드립니다. Meta(당시 Facebook)의 React Native에 대한 지속적인 투자와 발전, 성능 우려를 불식시킬 New Architecture 계획, 커뮤니티의 발전, Shopify의 내부 상황 변화 등 다양한 요소의 영향으로 Shopify는 React Native에 올인했고 과거부터 지금까지 React Native 생태계의 핵심 기여자이자 파트너로 활약하고 있습니다.

오랜만에 Microsoft의 React Native 블로그 글이 올라왔습니다. 최근 React Native 릴리즈에 맞춰 React Native Windows도 New Architecture를 사용할 수 있도록 프리뷰가 시작되었습니다. 이와 함께 이전 아키텍쳐가 계속 안정적으로 동작하도록 여러 개선을 병행하고 있다고 합니다. 그리고 Modal UI 컴포넌트 추가 소식도 있네요.

- 가로 600dp 이상 대화면 기기의 경우 풀 스크린 모드와 멀티 윈도우 모드에서 화면 방향과 크기 조절 제한 API들(android:screenOrientation 등)이 무시되므로 앱 개발자는 다양한 화면 크기와 방향에 대응해야 합니다. (SDK 36에서 옵트 아웃 가능하지만 37부터는 불가능합니다.)

- ‘예측된 뒤로 동작’(Predictive Back) 애니메이션이 기본 활성화되며, 옵트 아웃 가능합니다.

- edge-to-edge 디스플레이 강제를 windowOptOutEdgeToEdgeEnforcement를 사용하여 옵트 아웃 할 수 없게 됩니다.

- iOS 라이브 액티비티와 유사한 것으로 예상되는 ‘라이브 업데이트’ 알림이 추가됩니다.

라이브 액티비티는 애플 플랫폼에서 사용자에게 실시간으로 변화하는 정보를 더 잘 전달하고, 앱과의 상호작용을 돕는 UI 요소입니다. 이 글은 다소 개괄인 구현 방법과 함께, 구현에 앞서 검토해 봐야 할 기술적인 제약을 알려주고 있습니다. 라이브 액티비티의 실행 환경은 iOS 16.1 이상이며, UI에 표시할 데이터를 업데이트하기 위해 위젯이 직접 HTTP 요청을 하거나, Push 알림 인프라를 활용하여 서버 주도 업데이트를 할 수도 있다고 합니다. 각 선택에 따르는 기술적인 장단점을 간단히 소개하고 있습니다.

Reanimated와 Gesture Handler는 요즘 React Native 앱 구현에 필수 요소로 활용되지만 이를 직접 다뤄 UI를 개발하기보다 라이브러리를 통해 간접적으로 활용하는 경우가 흔한 것 같습니다. 이 글은 두 라이브러리를 사용해 바텀 시트 UI를 구현하는 코드를 소개하고 있지만 구현 세부에 관해서는 설명하지 않기 때문에 학습을 목적으로 읽으신다면 라이브러리 공식 문서 등을 활용해 API에 대해 더 알아보는 것이 좋겠습니다.

React Native 0.79 버전이 25년 4월 릴리즈를 목표로 하고 있으며, Remote JS Debug 기능이 제거될 예정입니다. React Native DevTools 사용을 권장하며, 기약은 없지만 크롬 확장 프로그램 지원이 가능한 방법을 검토하고 있다고 합니다. Remote JS Debug 기능은 아주 유용했지만, 실제 사용자의 실행 환경이 아닌 개발 환경(크롬 V8 엔진)에서 동작하므로 이 차이에 의한 오류와 버그가 발생하는 문제도 있었습니다. 또한 코어 팀의 유지보수 및 관리 노력의 차원에서 레거시 스택을 대신하는 CDP 기반의 스택이 구현되고 있습니다.

v4부터 New Architecture를 필수로 요구합니다. CSS 애니메이션/트랜지션 스펙을 지원하는데 이를 위해 CSS 애니메이션 코드를 Reanimated API 코드로 변환하는 온라인 도구를 별도로 제공합니다. 하지만 주변 요소(제스쳐/스크롤 상태/키보드 노출 여부 등)와 상호작용을 하여 동작하는 애니메이션은 구현할 수 없어서 이런 경우 기존 Reanimated 애니메이션 API를 사용해야 합니다.

Expo Atlas를 Expo 없이 React Native CLI 프로젝트에서 사용할 수 있게 해줍니다. Expo Atlas는 Bundle Visualizer와 유사한 도구지만 몇 가지 부가 기능을 제공합니다. 모듈 필터 기능은 탐색에 도움이 되고 간단한 종속 관계 그래프, 소스 코드 뷰어를 제공합니다. iOS/Android 양 플랫폼 번들을 전환하며 탐색할 수도 있습니다.

drag & drop으로 구성요소를 재배치할 수 있는 리스트 UI 컴포넌트입니다.

iOS 스타일의 제스처 기반 시트 전환 라이브러리로, 네이티브 앱 같은 부드러운 애니메이션을 제공합니다. (개발 단계 라이브러리)

React 컴포넌트 단위의 OTA 배포를 위한 베타 버전의 라이브러리입니다. 라이브러리 개발자에 따르면 Hermes 엔진 위에서도 잘 동작한다고 합니다.

웹 어셈블리 모듈을 C 코드로 AOT 컴파일해서 실행하는 실험적 라이브러리입니다.

모바일 E2E 테스트 자동화 도구인 Maestro는 YAML 문법을 활용하여 Appium보다 간단하게 E2E 테스트를 작성하고 구동할 수 있습니다. 24년 10월에 Maestro에도 AI를 사용한 UI defect 검출, 테스트케이스 작성 기능이 지원되기 시작했습니다.

참고할 만한 오픈소스 React Native 프로젝트를 소개합니다.

OpenAI의 Realtime API를 WebRTC로 연결하여 Expo로 구현한 예제입니다.

이번 소식이 유용하다면? 다음 소식도 받아보세요! 😊