Skip to main content

React Native 0.72 - 심링크 지원, 개선된 에러 처리 등

· 12 min read
Lorenzo Sciandra
Lorenzo Sciandra
Senior Software Engineer at Microsoft
Marek Fořt
Marek Fořt
Software Engineer at Shopify
Riccardo Cipolleschi
Riccardo Cipolleschi
Software Engineer at Meta
Luna Wei
Luna Wei
Software Engineer at Meta

오늘 0.72 버전을 출시한다!

이번 릴리스에서는 Metro를 위한 많은 요청을 받은 기능들, 더 나은 에러 처리, 그리고 개발자 경험 개선 사항들이 추가되었다. 이 작업의 상당 부분은 2022 커뮤니티 설문조사에서 받은 피드백을 기반으로 우선순위가 정해졌다. 참여해 준 모든 분들께 감사드린다!

주요 내용​

주요 변경 사항​

주요 내용​

새로운 Metro 기능​

심링크 지원 (베타)​

심링크 지원은 Metro에서 가장 많이 요청된 기능 중 하나다. React Native 0.72에서 베타 지원을 발표하게 되어 기쁘게 생각한다.

심링크 지원을 통해 React Native는 모노레포 설정과 pnpm과 원활하게 작동하며, 기존의 우회 방법이 필요 없어진다. 앱에서 사용하려면 베타 기능 활성화를 참고한다.

현재 베타 단계에서는 다양한 워크플로우에 대한 개발자 경험 피드백을 수집 중이다. 자세한 내용은 여기에서 확인할 수 있다. 0.73 버전부터는 심링크를 기본적으로 활성화할 계획이다.

패키지 내보내기 지원 (베타)​

패키지 내보내기는 패키지.json의 "main" 필드를 대체하는 모던한 방법이다. 이 기능은 npm 패키지가 공개 API를 정의하고 React Native를 대상으로 지정할 수 있는 새로운 기능을 제공한다.

Metro 설정에서 패키지 내보내기 지원을 활성화하면, 새로운 "react-native" 커뮤니티 조건을 포함해 더 넓은 JavaScript 생태계와 호환되는 앱을 만들 수 있다. 앱에서 이 기능을 사용하려면 베타 기능 활성화를 참고한다.

tip

이 기능과 안정적인 출시 계획에 대해 더 알아보려면 React Native에서의 패키지 내보내기 지원을 확인한다.

베타 기능 활성화​

프로젝트에서 이 기능을 활성화하려면 앱의 metro.config.js 파일을 업데이트하고 resolver.unstable_enableSymlinks 또는 resolver.unstable_enablePackageExports 옵션을 설정한다.

const config = {
  // ...
  resolver: {
    unstable_enableSymlinks: true,
    unstable_enablePackageExports: true,
  },
};

새로운 metro.config.js 설정​

React Native 0.72에서 React Native CLI의 Metro 설정 로딩 방식을 변경했다. 프로젝트의 metro.config.js 파일을 템플릿 버전에 맞게 업데이트해야 한다.

info

다음 형식으로 설정 파일을 업데이트한다. upgrade-helper를 참고해도 된다.

metro.config.js의 이 형식 변경은 0.73부터 필수가 된다. 0.72에서는 업데이트하지 않으면 경고 메시지를 표시한다.

이 변경으로 기본 React Native Metro 설정을 확장하는 제어권이 프로젝트로 넘어갔으며, 남아 있던 기본값을 정리했다. 또한, 이제 metro get-dependencies와 같은 독립적인 Metro CLI 커맨드가 작동한다.

개발자 경험 개선​

잘못된 스타일 속성으로 인한 오류 창 제거​

이전 버전에서는 StyleSheet에 잘못된 스타일 속성을 입력하면 오류 창이 나타났다. 이는 비교적 위험이 낮은 오류임에도 개발자 작업 흐름을 방해하는 강력한 신호였다.

0.72 버전에서는 브라우저에서 잘못된 CSS 속성을 입력할 때와 마찬가지로 이 오류를 조용히 무시하도록 변경했다. 또한 일부 오류를 런타임이 아닌 빌드 타임에 잡을 수 있도록 타입을 업데이트했다.

Hermes의 오류 가독성 개선​

Hermes는 정의되지 않은 호출 가능한 함수를 실행할 때 더 나은 오류 메시지를 제공한다.

    var x = undefined; x();
    // 이전: undefined is not a function
    // 이후: x is not a function (it is undefined)

또한, LogBox 스택 트레이스는 이제 앱 사용자와 관련 없는 내부 Hermes 바이트코드 프레임을 필터링한다.

React Native CLI의 개선된 에러 출력​

0.72 버전은 React Native CLI v11과 함께 제공되며, init, run-android, run-ios 명령어에서 중복을 줄이고, 문구를 명확히 하며, 장황한 스택 트레이스를 간소화하고, 관련 문서로의 딥 링크를 추가하는 개선 사항을 포함한다.

더 많은 개선 사항은 React Native CLI 변경 로그에서 확인할 수 있다.

Hermes에서 더 빠른 컴파일과 JSON 파싱​

Hermes는 대규모 객체 리터럴의 컴파일 시간을 개선했다. 예를 들어, #852 이슈에서 사용자가 전체 데이터셋을 대형 객체 리터럴로 작성한 사례가 있다. Hermes가 사용하는 중복 제거 알고리즘을 개선함으로써 컴파일 속도가 97% 빨라졌다(221c). 이 개선 사항은 많은 객체를 번들로 묶는 앱의 빌드 시간에 큰 도움이 될 것이다.

JSON 파싱에 대한 여러 최적화(de9c, 6e2d)도 적용되어, JSON 조작에 크게 의존하는 redux-persist와 같은 라이브러리를 사용하는 앱에 이점을 제공한다.

Hermes의 ECMAScript 지원 확대​

React Native 0.72에서 Hermes에 다음과 같은 스펙 지원이 추가되었다:

JSC를 사용하는 사용자라면 이미 이 기능들을 사용할 수 있다.

새로운 아키텍처 업데이트 이동​

현재 새로운 아키텍처는 실험 단계에 있다. 업데이트 내용을 타겟 독자에게 더 집중적으로 전달하기 위해, 0.72 버전 및 이후 릴리스에서 새로운 아키텍처 관련 업데이트를 전용 워킹 그룹으로 이동한다. 이를 통해 나이틀리 빌드에 포함된 작업과 같은 더 빈번한 업데이트가 가능해진다.

새로운 아키텍처에 대한 0.72 버전 업데이트는 여기에서 확인할 수 있다. 워킹 그룹의 GitHub 알림을 구독하여 새로운 아키텍처 개발 진행 상황을 계속해서 확인할 수 있다.

주요 변경 사항​

더 이상 사용되지 않는 컴포넌트 제거​

React Native 0.72 버전에서 다음 패키지가 제거되었다. 관련 기능을 사용 중이라면 커뮤니티에서 권장하는 패키지로 마이그레이션한다.

패키지 이름 변경​

react-native 코어 리포지토리에서 출시된 모든 패키지는 이제 react-native/packages 아래에 위치하며, 명확한 소유권을 보장하기 위해 @react-native npm 스코프 아래에서 출시된다.

react-native 패키지에는 변경 사항이 없다.

이전 패키지 이름새로운 패키지 이름
@react-native-community/eslint-config@react-native/eslint-config
@react-native-community/eslint-plugin@react-native/eslint-plugin
@react-native/polyfills@react-native/js-polyfills
@react-native/normalize-color@react-native/normalize-colors
@react-native/assets@react-native/assets-registry
react-native-codegen@react-native/codegen
react-native-gradle-plugin@react-native/gradle-plugin

이 변경 사항은 이름이 바뀐 패키지에 직접 의존성이 없는 경우에는 영향을 미치지 않는다. 그렇지 않다면, React Native 0.72로 업그레이드할 때 이름이 바뀐 모든 의존성을 ~0.72 버전으로 업데이트해야 한다.

이러한 변경 사항의 배경과 동기를 전용 RFC에서 확인할 수 있다.

감사의 말​

이번 릴리스는 커뮤니티로부터 받은 직접적인 피드백을 바탕으로 만들어졌다. noisy redboxes에 대한 보고서부터 Package Exports 버그, New Architecture 벤치마크에 이르기까지, 모든 피드백은 소중하며 이를 공유하는 데 시간을 할애해 준 것에 깊이 감사드린다.

0.72 버전은 66명의 기여자가 작성한 1100개 이상의 커밋으로 구성되었다. 여러분의 노고에 진심으로 감사드린다!

0.72 버전으로 업그레이드​

업그레이드 헬퍼에서 필요한 변경 사항 목록을 확인하거나, 업그레이드 문서를 참고해 기존 프로젝트를 업데이트하는 방법을 알아보자. 새로운 프로젝트를 생성하려면 npx react-native@latest init MyProject 명령어를 사용한다.

Expo를 사용하는 경우, React Native 0.72 버전은 Expo SDK 49 릴리스에서 지원될 예정이다.

info

0.72 버전이 이제 React Native의 최신 안정 버전이며, 0.69.x 버전은 더 이상 지원되지 않는다. 자세한 내용은 React Native 지원 정책을 참고한다.