숨고의 React Native 엔지니어들이 생태계 전반의 유용하고 흥미로운 소식들을 소개합니다. 숨고의 React Native 엔지니어들이 생태계 전반의 유용하고 흥미로운 소식들을 소개합니다. |
|
|
- Metro 0.82 버전이 사용되며, 번들링 콜드스타트 성능이 향상됐습니다. 또한 React Native 0.72 버전에 실험적으로 도입됐던 package.json exports, imports 필드 지원이 기본 활성화됩니다. (만약 비활성화 해야 할 경우 Metro config의 resolver.unstable_enablePackageExports 플래그를 조정할 수 있습니다.)
- React Native의 API 범위를 간소화하려는 노력의 하나로 JSC(JavaScriptCore) 엔진이 React Native Core로부터 커뮤니티 관리 패키지로 분리를 시작합니다. 가까운 미래에는 React Native Core에서 JSC 엔진이 완전히 제거될 예정입니다. Hermes 엔진을 사용하는 경우 영향을 받지 않습니다.
- React Native 0.77 버전부터 도입된 Swift AppDelegate를 사용할 때, 순수 C++로 작성된 네이티브 모듈을 등록할 수 없던 제약이 해소되었습니다. package.json에 codegenConfig 필드 등을 선언하는 방식으로 TurboModule을 등록하면 됩니다.
- Android 앱 시작 속도가 개선되었습니다. 그동안 Android 빌드시 JS 번들을 압축하여 APK 파일에 포함하고 있었는데, app/build.gradle 파일에서 enableBundleCompression 플래그를 조정하여 JS 번들의 압축 여부를 변경할 수 있게 되었습니다. (기본적으로 압축 비활성화) 이로써 APK 파일 크기는 조금 늘어나지만, 앱 시작 시 압축 해제 과정이 제거되므로 시작 성능이 향상됩니다. (더 자세한 내용과 벤치마크는 PR🔗 을 확인해 주세요.)
- Remote JS Debug 기능이 제거됩니다. 내장된 React Native DevTools 또는 기타 도구를 사용할 수 있습니다.
- react-native 패키지의 하위 경로에 위치한 46개 API에 대해 가져오기 방법을 변경해야 할 수 있습니다. require()를 사용하는 경우 명시적으로 .default를 붙여야합니다. 추후에는 하위 경로 안의 모듈들을 가져올 수 없도록 다양한 수단을 통해 금지할 예정입니다.
|
|
|
지원 버전 정책을 따라, 0.76 이하 버전에 대한 공식 지원 지원이 종료되었습니다. 기존에는 약 3개월 주기였던 릴리즈 주기가 짧아진 만큼, 업그레이드 주기도 짧게 조정하는 것이 좋겠습니다. |
|
|
|
(이메일을 포함한 간단한 정보를 입력하고 PDF와 EPUB 파일을 제공받을 수 있습니다)
React Native 앱의 최적화를 위한 다양한 방법들을 렌더 성능, 메모리 사용량, 번들 크기 등 여러 범주로 나누어 다루고 있습니다. JS 및 네이티브 측면에서 성능/메모리 문제를 발견하기 위한 측정 방법도 소개하여 최적화 필요성을 검토하거나, 최적화의 효과를 파악하는 데 활용할 수 있습니다.
올해는 React와 React Navigation의 최신 기술을 반영하여 React Compiler뿐만 아니라 New Architecture에서 React 19의 동시성 렌더링을 활용하는 방법들도 추가되었고, React Native 내장 DevTools도 다루고 있습니다. |
|
|
|
Reanimated와 GestureHandler의 성능을 위해 구현된 Worklet은 시간이 지나면서 커뮤니티를 통해 다양한 사용 사례를 발견하게 되었습니다. 또한 애니메이션, 제스쳐와 강하게 결합된 멀티스레딩 모델은 유지보수하기 어려워졌고 특히 확장성이 부족했다고 합니다. Reanimated 코드베이스가 거대해진 점도 문제인데 특히 웹 앱 제품에는 좋지 않은 특성이며, Reanimated 기능이 불필요하더라도 Worklet을 활용하기 위해 의존할 수밖에 없는 점도 문제였다고 합니다. 이에 Worklet을 멀티 스레딩 라이브러리로 분리하려는 계획을 공개했습니다. 초안이지만 새로운 Worklet 라이브러리가 어떤 API를 제공할 예정이며, 멀티스레딩 환경에서 어떤 메모리 공유 옵션을 제공하는지를 살펴볼 수 있습니다. |
|
|
|
Lynx는 ByteDance에서 개발하여 TikTok 서비스에 활용하고 있는 크로스플랫폼 프레임워크입니다. 최근 오픈소스로 공개하면서 큰 관심을 받았는데요, 이 글을 통해 Lynx의 장점이 무엇인지 가볍게 살펴볼 수 있습니다. Lynx는 기본적으로는 메인 스레드를 UI 그리기 전용으로 사용하며 백그라운드 스레드에서 그 밖의 연산을 처리하도록 설계하여 UI 렌더링 성능이 좋다고 합니다.
저자는 Lynx의 각 장점에 대해 React Native를 비교하면서도 옹호하는 의견을 내놓고 있는데요, 이 글을 작성한 Infinite Red 팀은 스스로를 ‘React Native 회사’라고 표현하며 다소 편향적인 의견을 갖고 있음을 밝히고 있습니다. 기술의 우위를 가리는 것도 흥미로운 일이지만, 경쟁할 수 있는 기술의 등장이 React Native의 발전을 더 가속하길 기대해 봅니다. |
|
|
|
얼마 전 Callstack은 엔터프라이즈 규모의 큰 팀을 위한 React Native 프레임워크 개발을 공개했습니다. 이 글은 새로운 프레임워크에서 로컬 빌드 경험을 향상하기 위해 CLI 도구를 개선했음을, 재사용할 수 있는 디버그 앱 빌드를 사용해 팀 내 각 개발자가 직접 로컬에 빌드하는데 들이는 시간을 절약했음을 소개합니다. 글에서 구체적인 방법을 다루고 있지 않고, Expo를 적극적으로 사용하는 팀에겐 참신한 내용이 아니지만 글을 읽는 분들에게 새로운 아이디어의 씨앗이 되길 바랍니다. |
|
|
컴포넌트를 감싸면 하위 뷰에 자동으로 스켈레톤 UI를 적용해 주는 라이브러리입니다. 하위 뷰 중 스켈레톤이 표현되지 않아야 하는 컴포넌트를 선택적으로 제외하는 기능도 포함돼 있습니다. Old Architecture(Paper) 및 New Architecture(Fabric)을 지원합니다.
|
|
|
|
플랫폼 네이티브 바텀 탭 UI 라이브러리입니다. Android, iOS, iPadOS, visionOS, tvOS, macOS 각 플랫폼 네이티브 구현체를 사용하도록 구현되어, 플랫폼에 따른 사용자 경험을 제공하고 플랫폼에 특화된 기능을 활용하려는 React Native 앱에 유용하게 활용할 수 있습니다. |
|
|
|
특정 위-경도 좌표를 사용자의 기기에 설치된 지도 앱을 열어 표시하는 ‘지도 앱으로 열기’ 기능을 구현한 라이브러리입니다. 애플, 구글 지도뿐만 아니라 카카오 지도, 네이버 지도, 티맵을 지원합니다. |
|
|
|
Web Audio API를 크로스 플랫폼으로 구현하는 React Native 라이브러리입니다. 공식 문서 웹 페이지에서 사운드 재생이나 오디오 파형 출력 등 현재 지원하는 기능들의 간단한 예제들을 살펴볼 수 있습니다. |
|
|
|
Skia, Reanimated 기반의 고성능 그래프 차트 라이브러리입니다. 사용자가 특정 지점의 값을 읽을 수 있도록 제스쳐와 상호작용 기능도 내장되어 있습니다. |
|
|
|
React Query를 사용하는 개발 환경 앱에 연동할 수 있는 macOS DevTool입니다. 간단한 연동 과정 후 React Native 디버그 앱을 macOS 앱과 연결하여 React Query 동작을 모니터링하거나 조작할 수 있습니다.
Expo Dev Tools 플러그인으로도 나와 있습니다. ( Github 🔗) |
|
|
|
iOS 시뮬레이터나 Android 기기/에뮬레이터에 설치된 디버그 빌드 앱에 연결하여 앱 내 DB 파일(.db, .sqlite, .sqlite3)을 쉽게 조회하고 수정할 수 있는 도구입니다. |
|
|
이번 소식이 유용하다면? 다음 소식도 받아보세요! 😊 |
|
|
(주)브레이브모바일 / techmobile@soomgo.com
서울특별시 강남구 테헤란로 133, 11-12층 (역삼동, 한국타이어빌딩)
|
|
|
|
|
