ReactNative 0.74 release notes [번역글]

Yoga 3.0이 추가되었고 새로운 아키텍쳐에서 브릿지는 기본적으로 없습니다. onLayout을 배치 없데이트 하고, yarn3가 새로운 프로젝트에서는 기본적인 패키지 매니저로 사용합니다

 

deprecated된 API들을 제거하였고 PushNotificationIos에 대대적인 변화와 PropTypes를 제거하였습니다. 안드로이드에서는 sdk23(android 6.0)이 최소 지원 버전입니다.

 

하이라이트

• Yoga 3.0
• 새로운 아키텍처: 브릿지를 기본으로 사용하지 않음
• 새로운 아키텍쳐: onLayout의 배치 업데이트
• Yarn3

주목할만한 변화

• Android 최소 버전 적용(Android 6.0)
• PushNotificationIos Api의 변화
• PropTypes의 제거
• Flipper React native Plugin의 제거
• 다른 변화들

Yoga 3.0

New Layout Behaviors

리액트 네이티브 0.74는 레이아웃 엔진의 새로운 버전인 Yoga 3.0을 포함합니다. Yoga 3.0은 styling을 좀 더 예측가능하게 함으로써 레이아웃을 개선하고 컴포넌트를 web위해 렌더링 될 수 있도록 합니다. 

 

리액트 네이티브는 고치게 되면 상당한 수의 현재 컴포넌트 들에 영향이 갈 수 있는 잘못된 레이아웃 행동을 의도적으로 유지하기로 하였습니다. 레이아웃 conformance는 미래의 리액트 네이티브 버전에서 좀 더 세분화 되어 질 수 있습니다

리액트 네이티브는 이전에 row-reverse 컴포넌트 내에서 margin, padding, border을 다룰때 left/right (start/end)를 반대로 적용하였습니다. 이제 이러한 속성들은 web과 같이 적용됩니다. 이전의 코드가 반대로 적용되었다면 이제 올바르게 나오도록 업데이트 되었습니다

align-content: 'space-evenly'의 적용

Yoga 3.0은 alignContent: 'space-evenly' 지원을 가능케 합니다. space-evenly는 multi-line flex 컨테이너에서 남는 공간을 동ㅇ리하게 분배해줍니다

 

 

position: 'static'의 지원

> position: 'static'은 New 아키텍쳐에서만 지원됩니다

 

position: 'static'으로 적용된 요소들은 offset이 아닐 거고 절대 위치를 가지는 요소로 고려되지 않을 것입니다. 요소들의 위치가 직접적인 부모 요소가 아닌 조상 요소에 관련되게 허용합니다

 

초록색 영역이 left와 top 속성을 선언한 것과 부모요소가 아닌 파란 영역에 연관되어 위치한 것을 확인해보세요

 

리액트 네이티브는 position이 선언되지 않으면 position: 'relative'를 기본으로 설정합니다

 

New Architecture: Bridegeless by Default

이 버전에서는 New Architecture가 가능할 때 Bridgeless 모드를 기본으로 설정합니다. 이 포스트에서 Bridgeless의 우리의 변화된 생각에 대해 알 수 있습니다. 전환을 부드럽게 하기 위해 interop 레이어를 강화 시켰습니다. Bridgeless를 커버하고 몇몇 라이브러리들과  협력하여 Bridgeless내에서 첫날 부터 잘 동작하도록 하였습니다.

 

Bridgeless는 우리가 작업한 유일한 interop 레이어가 아닙니다. 우리는 New Renderer interop layer도 향상 시켰습니다. 가장 흥미로운 점은 이것이 이제 기본으로 가능하다는 점 입니다. 관련하여 이 글에서 더 읽을 수 있습니다.

 

마지막으로 만약 New Architecture에 대해 더 알고 싶다면 react-natvie-new-architecture 저장소 내의 문서를 찾을 수 있습니다

New Architecture가 기본으로 적용이 된다면 이 정보는 reactnative.dev에 통합될 것 입니다.

 

New Architecture: Bateced onLayout updates

onLayout 콜백들 내의 상태 업데이트들은 이제 batch 형태로 동작합니다. 이전에, 각각의 onLayout 내에서의 상태 업데이트는 새로운 렌더 커밋에서만 결과를 확인할 수 있었다

function MyComponent(props) {
  const [state1, setState1] = useState(false);
  const [state2, setState2] = useState(false);

  return (
    <View>
      <View
        onLayout={() => {
          setState1(true);
       }}>
      <View
         onLayout={() => {
          // When this event is executed, state1's new value is no longer observable here.
          setState2(true);
        }}>
      </View>
    </View>
  );
}

 

0.74에서 setState1과 setState2는 같이 지연 업데이트가 되어진다. 이러한 변화는 리액트에서 일반적이고 리렌더를 줄여주는 방식이다.

 

Yarn 3 for new Projects

yarn 3는 React Natvie Community Cli에서 프로젝트를 새로 시작할때 기본 자바스크립트 패키지 매니저 입니다.

 

Yarn 3.x는 nodeLinker: node-modules를 사용하고 nodeLinker는 리액트 네이티브 라이브러리들과도 잘 상호작용 합니다. 기본으로 동작하던 Yarn Claassic(1.x는 deprecated)를 대체합니다. Yarn 버전을 현재 프로젝트에서 업그레이드 하려면 이 가이드를 따르세요

 

$ yarn --help
━━━ Yarn Package Manager - 3.6.4 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  $ yarn <command>

 

Community CLI에서는 --pm 명령어를 통해 다른 패키지 매니저를 통해 프로젝트를 시작하는 것을 지원합니다.

 

 

Breaking Changes

Android Minimum SDK Bump (Android 6.0)

리액트 네이티브 0.74는 Android SDK 버전 23이 최소버전입니다(Android 6.0). 이전에는 Adnroid 5.0(API 21) 

 

Bonus : Android app size reduction

최소 sdk버전이 올라감에 따라 네이티브 빌드에서 몇몇 향상이 생겼습니다. 앱의 사이즈를 크게 줄일 수 있습니다.

 

예를 들어 React Native 0.74로 빌드한 앱은 사용자의 기기에서 13% 정도를 적게 점유하고 결과적으로 기기에서 ~4MB를 세이브 할 수 있습니다.

 

 

Removal of Deprecated PropTypes

0.74 이전에 React Native는 2017년도의 React 15.5에서 deprecated된 API인 PropTypes를 계속해서 사용하고 있었습니다.

PropTypes 속성을 전부 지웠고 앱 사이즈와 메모리 오버헤드를 줄였습니다. 

 

PropTypes 속성은 Image.propTypes, Text.propTypes, TextInput.propTypes, ColorPropType, EdgeInsetsPropType, PointPropType, ViewPropTypes에서 제거됩니다.

 

만약 당신의 앱이나 라이브러리가 PropTypes에 의존하고 있다면 TypeScript와 같은 타입 시스템으로 이전하기를 강하게 추천합니다.

 

API Changes to PushNotificationIOS (Deprecated)

React Native 0.74에서 deprecated된 PushNotificationIOS 라이브러리를 제거하기 위한 작업을 시작하였습니다. 이 버전에서의 변화는 오래된 ios Api들을 제거하는데 집중하였습니다. PushNotificationIOS는 Apple의 User Notification 프레임워크로 변경되었고 알림들을 다루고 예약하는 새로운 API를 공유하였습니다. 

 

다음 버전(0.75)에서 이 라이브러리를 제거할 계획이 있습니다. React Native core에서 제거하고 커뮤니티 패키지로 이동시킬 겁니다 @react-native-community/push-notification-ios 만약 PushNoticationIOS에 여전히 의존하고 있다면 다음 버전 전에 제거해야할 필요가 있습니다

 

API Changes

RCTPushNotificationManager의 콜백으로 동작하는 didRegisterUserNotificationSettings:은 제거되었습니다.

 

RCTPushNotificationManger의 콜백들은 deprecated되었고 0.75에서 제거될 예정입니다.

+ (void)didReceiveLocalNotification:(UILocalNotification *)notification;
+ (void)didReceiveRemoteNotification:(NSDictionary *)notification;

 

getInitialNotification()을 사용하는 앱이 실행 될때 알림들을 되찾기 위해 이젠 RCTPushNotificationManger의 initialNotification을 설정해야할 필요가 있습니다.

[RCTPushNotificationManager setInitialNotification:response.notification];

 

JS 에서 Notificaiton의 속성들은 변했습니다. alertAction과 repeatInterval은 deprecated되었고 0.75에서 제거될 것입니다.

 

type Notification = {
  ...
  // NEW: Seconds from now to display the notification.
  fireIntervalSeconds?: ?number,

  // CHANGED: Used only for scheduling notifications. Will be null when
  // retrieving notifications using `getScheduledLocalNotifications` or
  // `getDeliveredNotifications`.
  soundName?: ?string,

  // DEPRECATED: This was used for iOS's legacy UILocalNotification.
  alertAction?: ?string,

  // DEPRECATED: Use `fireDate` or `fireIntervalSeconds` instead.
  repeatInterval?: ?string,
};

 

 

 

 

 

 

https://reactnative.dev/blog/2024/04/22/release-0.74

React Native 0.74 - Yoga 3.0, Bridgeless New Architecture, and more · React Native