React Native 0.73 - 디버깅 개선, 안정적인 심볼릭 링크 지원 등
오늘 React Native 0.73을 출시한다. 이번 릴리스에서는 Hermes를 통한 디버깅 개선, 안정적인 심볼릭 링크 지원, Android 14 지원, 그리고 새로운 실험적 기능을 추가했다. 또한 레거시 디버깅 기능을 더 이상 사용하지 않을 예정이며, 새로운 아키텍처의 다음 기둥인 Bridgeless Mode를 선보인다!
주요 내용
주요 변경 사항
주요 기능
디버깅 개선
React Native와 Hermes 팀은 React Native의 디버깅 경험을 개선하기 위해 지속적으로 노력하고 있다. 0.73 버전에서는 이러한 지속적인 투자로 인해 이루어진 초기 성과를 공유할 수 있게 되어 기쁘게 생각한다.
Hermes에서의 콘솔 로그 기록
console.log()는 개발자가 자바스크립트 코드를 빠르게 디버깅하는 데 널리 사용되는 방법이다. 이전 버전에서는 React Native 앱의 콘솔 로그가 디버거가 연결될 때까지 기록되지 않았다. 이로 인해 앱 로드 초기에 발생하는 로그를 확인하기 어려웠다.
React Native 0.73에서는 이 문제를 해결했다. 이제 Hermes는 백그라운드에서 모든 console.log() 호출을 캡처하며, 디버거가 처음 연결될 때 콘솔 탭으로 전송된다. 이 새로운 동작은 웹 브라우저의 디버깅 경험과 일치한다. 이 기능은 Flipper, Hermes에 연결된 Chrome DevTools, 그리고 실험적인 New Debugger에서 모두 작동한다.
디버깅 문서 업데이트
디버깅 문서 섹션을 새롭게 업데이트했다. 이제 지원되는 모든 디버거를 연결하는 방법에 대한 최신 정보, React DevTools에 대한 추가 정보, 그리고 새로워진 시각 자료를 확인할 수 있다.
실험적인 새로운 디버거
React Native 팀은 Flipper를 대체할 새로운 JavaScript 디버거를 개발 중이다. React Native 0.73부터 기술 프리뷰로 제공되며, 이 디버거는 즉시 열리고 Hermes를 사용해 React Native를 디버깅하도록 맞춤화된 간소화된 Chrome DevTools UI를 제공한다.
새로운 디버거는 실험적이며, React Native의 향후 릴리스에서 해결하기 위해 적극적으로 작업 중인 알려진 문제가 있다. 사용해 보는 중에 피드백을 제공하려면 동일한 논의 스레드를 이용하면 된다.
이 기능을 활성화하는 방법에 대해 더 알아보려면 문서를 참고한다.
Metro에서의 안정적인 심볼릭 링크 지원
Metro에서 심볼릭 링크를 해석하는 기능이 이제 기본적으로 활성화되었다. 이 기능은 React Native가 모노레포 설정에서도 원활히 동작할 수 있도록 해주며, 특히 watchFolders로 디렉터리를 구성한 경우에 유용하다.
심볼릭 링크는 Metro의 내부에서 깊이 통합되어 있어, 패스트 리프레시와 같은 기능과도 잘 동작한다. 또한, 번들링 과정에서 성능 저하가 거의 발생하지 않는다. 심볼릭 링크는 Watchman의 유무와 관계없이 모든 데스크톱 플랫폼에서 지원된다.
모노레포 사용 시 해결 방법
React Native를 모노레포 구조에서 사용할 때 여전히 몇 가지 예외 상황이 발생할 수 있다. 이 문제를 해결하기 위한 작업을 계획 중이며, 0.73 버전에는 포함되지 않았지만 최대한 빠르게 제공할 예정이다.
React Native 템플릿 프로젝트(npx react-native init)의 경우, 프로젝트 루트 외부에 있는 watchFolders를 설정해야 Metro가 해당 폴더를 인식할 수 있다(자세한 정보). 또한 react-native 의존성이 다른 레벨의 폴더에 설치된 경우 파일 경로를 업데이트해야 할 수도 있다.
Expo 앱의 경우, Yarn(Classic) 워크스페이스 지원이 기본적으로 구성되어 있다. Expo 문서의 모노레포 작업 가이드도 참고한다.
안드로이드에서의 코틀린 템플릿
0.73 버전부터, 코틀린이 React Native로 빌드된 안드로이드 앱의 권장 언어로 선정되었다. 이는 안드로이드 생태계가 수년 동안 추구해온 방향과 일치하며, 여러분이 모던한 언어로 앱을 작성할 수 있게 해준다.
React Native의 안드로이드 템플릿을 자바 대신 코틀린으로 업데이트했다. 새로운 MainActivity.kt와 MainApplication.kt 파일은 기존보다 36% 더 작아졌다.
Upgrade Helper도 .java 파일을 .kt 파일로 마이그레이션하기 쉽도록 업데이트되었다. 프로젝트에서 자바 파일을 수정한 적이 있고 이를 코틀린으로 마이그레이션하는 데 도움이 필요하다면, Android Studio의 Code > Convert Java file to Kotlin File 유틸리티를 사용할 수 있다. 이 기능은 Cmd ⌘ + Shift ⇧ + Option ⌥ + K 단축키로도 접근 가능하다.
Android 14 지원
React Native를 업데이트하여 Android 14를 완벽하게 지원한다. 0.73 버전부터 React Native 개발자는 최신 Android SDK 버전인 API 레벨 34(Upside Down Cake)를 타겟팅할 수 있다.
Java 17과 Android Gradle Plugin 업그레이드
Android 14을 지원하기 위해 Android 앱 빌드에 사용되는 Android Gradle Plugin(AGP) 버전을 7.4.x에서 8.1.x로 업데이트했다.
AGP의 이번 메이저 버전 업그레이드는 Google의 릴리스 노트(8.0.0 및 8.1.0)에서 확인할 수 있는 여러 주요 변경 사항을 동반한다.
가장 중요한 점은 이제 Android 앱을 빌드하려면 Java 17이 필수라는 것이다. 다음 명령어를 실행해 Java 버전을 17로 업데이트할 수 있다:
brew install --cask zulu@17
그리고 시작 가이드에 설명된 대로 JAVA_HOME을 업데이트해야 한다.
라이브러리 개발자라면, React Native 0.73과 호환되도록 별도의 변경 없이 라이브러리를 사용할 수 있다. 올해 초, AGP 업그레이드가 라이브러리 개발자에게 어떤 의미를 갖는지 설명하는 글을 공유한 바 있다.
사진과 동영상에 대한 부분 접근 권한 부여
선택한 사진 접근 권한은 Android 14 사용자가 앱에 미디어 라이브러리의 모든 콘텐츠가 아닌 특정 항목에만 접근 권한을 부여할 수 있게 한다. React Native 0.73 버전에서는 PermissionsAndroid API의 READ_MEDIA_VISUAL_USER_SELECTED 권한을 사용해 이 기능을 지원한다.
최소 SDK 버전 변경
React Native 0.73은 Android 5.0 (API Level 21)을 지원하는 마지막 버전이다. 다음 버전부터는 최소 SDK 버전이 23 (Android 6.0)으로 변경된다. 최소 SDK 버전 변경에 대한 자세한 내용은 여기에서 확인할 수 있다.
새로운 아키텍처 업데이트
React Native의 새로운 아키텍처를 오픈소스 커뮤니티 모두가 사용할 수 있도록 계속해서 출시하고 있다.
React Native 0.68부터 새로운 렌더러(Fabric)와 새로운 네이티브 모듈 시스템(TurboModules)이 사용자들이 실험하고 평가할 수 있도록 제공되었다. 지금까지 받은 피드백에 대해 커뮤니티에 감사한다.
오늘 새로운 아키텍처의 또 다른 부분인 Bridgeless Mode를 출시한다. 지금까지 앱에서 새로운 아키텍처를 활성화하면 이전 컴포넌트와 모듈과의 호환성을 지원하기 위해 브릿지가 여전히 사용 가능했다. 하지만 우리의 목표는 브릿지를 완전히 단계적으로 폐지하는 것이다. React Native 0.73부터는 브릿지 생성을 완전히 비활성화하는 Bridgeless Mode를 활성화할 수 있다.
Bridgeless Mode와 함께, Bridgeless Mode에서 이전 모듈을 재사용할 수 있게 해주는 Native Module Interop Layer도 제공한다. React Native 0.72에서 소개된 Renderer Interop Layer도 Bridgeless Mode와 함께 작동하도록 조정되었다.
새로운 아키텍처의 나머지 부분과 마찬가지로, Bridgeless Mode는 초기에 실험적이다. 관심 있는 사용자들이 이를 활성화하고 New Architecture working group에서 직면한 문제와 호환성 문제를 보고하길 권장한다.
더 이상 사용되지 않는 디버깅 기능
Flipper ↔ React Native 통합
React Native 팀은 점차적으로 Flipper를 기본 디버깅 도구로 사용하지 않는 방향으로 전환하고 있다. 0.73 버전부터는 React Native에 포함된 네이티브 Flipper 통합(플리퍼의 핵심 플러그인을 연결하는 부트스트랩 코드)을 더 이상 사용하지 않기로 결정했다. 다음 릴리스에서는 이 통합과 의존성을 제거할 예정이다. 이로 인해 네트워크 플러그인과 같은 Flipper의 일부 기능은 더 이상 작동하지 않게 된다.
변경되지 않은 부분: 네이티브 앱 디버깅을 위한 독립적인 제품으로서의 Flipper는 계속 존재할 것이다. 향후 새로운 React Native 프로젝트에서 제거되더라도, 개발자가 원한다면 앱에 Flipper를 수동으로 추가할 수 있다.
Flipper를 더 이상 사용하지 않는 이유에 대한 자세한 내용은 RFC 문서를 참고한다.
원격 자바스크립트 디버깅
원격 자바스크립트 디버깅은 외부 웹 브라우저(Chrome)를 앱에 연결하고, http://localhost:8081/debugger-ui와 같은 웹 페이지 내에서 자바스크립트 코드를 실행하는 레거시 디버깅 모드다. 이 방식은 디버깅 중 앱의 동작이 일관되지 않을 수 있으며, 새로운 아키텍처에서 네이티브 모듈과 호환되지 않는다.
0.73 버전부터 원격 자바스크립트 디버깅은 더 이상 사용되지 않으며, 개발자 메뉴에서 제거되었다. 이제 원격 디버거를 활성화하려면 NativeDevSettings API를 통해 수동으로 설정해야 한다. 이에 대한 자세한 내용은 기타 디버깅 방법 문서에서 확인할 수 있다.
원격 자바스크립트 디버깅은 이전에 JavaScriptCore(JSC)를 사용하는 앱의 기본 디버깅 방식이었다. iOS 앱의 경우, Safari 개발자 도구(직접 JSC 디버깅)를 대신 사용하는 것을 권장한다.
모든 플랫폼에서 일관된 디버깅 환경을 원한다면 Hermes를 사용하는 것이 좋다.
주요 변경 사항
Babel 패키지 이름 변경
두 개의 Babel 관련 패키지를 Metro에서 React Native 저장소로 이전하고 버전 관리 체계를 통합했다. 이를 통해 유지보수와 업그레이드가 간소화됐다. 새로운 버전의 패키지는 0.73 버전의 New Architecture 기능을 지원하며, 따라서 해당 의존성을 반드시 업데이트해야 한다.
업그레이드 시 Upgrade Helper를 참고해 의존성을 업데이트하길 바란다. 일부 패키지 이름이 다음과 같이 변경됐다:
| 기존 패키지 이름 | 새로운 패키지 이름 |
|---|---|
metro-react-native-babel-preset | @react-native/babel-preset |
metro-react-native-babel-transformer | @react-native/metro-babel-transformer |
@react-native/babel-preset에 @react-native/babel-plugin-codegen이 포함됐으므로, 더 이상 Babel 설정 파일에 별도로 지정할 필요가 없다.
주요 변경 사항
0.73 버전에서 주목할 만한 주요 변경 사항은 다음과 같다. 전체 변경 사항 목록은 전체 변경 로그를 참고한다.
- Node.js 최소 요구 버전을 18.x로 상향 조정 (#37709) (참고: Node.js 16 EOL).
- 템플릿이 TypeScript 5.0을 사용하도록 변경 (#36862).
- React Native 타입은 TypeScript 4.8에서도 계속 동작한다.
- Android: Android 앱 빌드를 위해 Java 17이 필수 요구 사항이 됨 (위 내용 참고).
- Android: Fresco를 3.0으로 주요 버전 업그레이드 (#38275).
- iOS: 최소 iOS 버전을 13.4로 상향 조정 (#36795).
- iOS: Xcode를 통해 빌드를 실행할 때 Metro가 자동으로 시작되지 않음 (#38242).
라이브러리 개발자를 위한 변경 사항:
- Android: AGP 8.1.1로 버전 업그레이드 (토론)
React Native CLI 주요 변경사항
주요 변경 사항 요약
build-android명령어의 기본 태스크 프리픽스 변경. 이제build-android를 실행하면assemble대신bundle태스크가 실행된다 (#1913).- Metro 설정 기본값에 대한 폴백 플로우 제거 (#1972).
- 0.72 버전에서 도입된 업데이트된
metro.config.js포맷이 이제 0.73 버전에서 필수로 적용된다. CLI에서 이러한 기본값의 폴백 복사본을 제거했기 때문이다.
- 0.72 버전에서 도입된 업데이트된
run-ios명령어에서--configuration옵션 제거 (대신--mode로 대체) (#2028).build-android명령어에서--variant옵션 제거 (대신--mode로 대체) (#2026).
더 이상 사용되지 않는 @types/react-native
TypeScript 퍼스트클래스 지원에서 언급했듯이, React Native 0.71 버전부터는 타입스크립트 타입을 react-native 패키지와 함께 제공하고 있다. 이제 0.73 버전부터는 @types/react-native를 더 이상 사용하지 않기로 결정했다.
기존 버전에 대한 패치를 더 이상 제공하지 않을 예정이다. 따라서 @types/react-native에서 벗어나도록 마이그레이션해야 한다. 자세한 마이그레이션 방법은 이 가이드를 참고한다.
감사의 말
React Native 0.73에는 68명의 기여자가 만든 2259개의 커밋이 포함되어 있습니다. 여러분의 노고에 감사드립니다!
0.73 버전으로 업그레이드
기존 프로젝트의 React Native 버전 간 코드 변경 사항을 확인하려면 React Native Upgrade Helper를 사용하세요. 또한 업그레이드 문서도 참고할 수 있습니다. 새로운 프로젝트를 생성하려면 npx react-native@latest init MyProject 명령어를 사용하세요.
Expo를 사용하는 경우, React Native 0.73은 Expo SDK 50 릴리스에서 지원될 예정입니다.
0.73이 현재 React Native의 최신 안정 버전이며, 0.70.x 버전은 더 이상 지원되지 않습니다. 자세한 내용은 React Native 지원 정책을 참고하세요.