[RN Cheat-Sheet] 0.76 살펴보기

HYUNGU, KANG·2024년 11월 4일
2

React-Native-CheatSheet

목록 보기
23/24

React-Native 0.76 버전이 릴리즈 됐습니다 👏 (CHANGELOG)

React Native New Architecture by default

New architecture is here

이제부터 새로운 프로젝트를 생성하면 New Architecture 가 활성화된 상태로 생성됩니다. (0.76+)
Expo 에서는 52 버전부터 0.76 이 적용 될 예정입니다. (현재 베타)

이제부터 본격적으로 전체 생태계가 점진적으로(반강제로) 마이그레이션 되겠네요

New architecture 를 비활성화 하는 방법은 다음 아티클을 참고하세요
👉 https://velog.io/@bang9dev/new-architecture-disable

React Native DevTools

https://github.com/react-native-community/discussions-and-proposals/discussions/819

디버깅 툴인 React Native DevTools 가 드디어 스테이블 버전으로 첫 출시가 됩니다.

JSC, Hermes 자바스크립트 엔진이 바뀌어 오면서, 이를 디버깅하기 위한 도구들도 Chrome debugger > Flipper > Chrome debugger for Hermes > Experimental debugger 왔다갔다 하면서 변경이 되었었는데요

Flipper 는 강력하긴 하지만 아무래도 네이티브를 위한 도구이다 보니, React-Native 에 통합시킨 뒤에 이로인한 아키텍쳐/빌드 문제라던가 연결이 잘 안되는등의 문제들 또한 버전이 올라가면 빈번하게 발생했었습니다.

현재는 Flipper 도 RN 에서 제거가 되었고, 다시 돌고 돌아서 크롬 위에서 돌아가는 새로운 디버깅 도구가 탄생한 셈이죠. 기존의 React 디버깅 도구인 React DevTools 와 통합되어 익숙한 디버깅 경험을 선사하고 크롬의 디버깅 기능들 또한 제공이 되어서, JS 생태계에 어울리는 더 강력해진 도구입니다.

도구 자체가 이제 내장이 되어 있어, 별도의 설치 필요 없이도 CLI 에서 J 버튼을 누르거나 Dev menu 에서 즉시 실행이 가능합니다. (그리고 이에 발맞춰, 다음 버전부터는 metro server(터미널) 에서 JS 로그도 안나오게 됩니다 😑;)

Faster Metro resolution

https://github.com/facebook/metro/releases/tag/v0.80.11

React-Native 의 번들러인 metro 에서 resolver(모듈을 import 경로에서 찾는 컴포넌트) 의 성능을 개선하여 15배 빠르게 동작하도록 만들었습니다.

내부의 알고리즘, 새로운 API, 캐싱 최적화, Low-level 에서 자바스크립트 최적화 등이 적용된 결과이고, 이를 적용하기 위한 breaking changes 또한 없습니다.

만약 metro 0.80.x 를 사용중인 React-Native 버전(0.73 이상) 이라면, 메트로의 버전을 업데이트 하는것만으로 이 성능 개선을 누릴 수 있다고 하네요 👍

Box Shadow and Filter style props (**New architecture only)

boxShadow

그림자 스타일을 생성하려면 https://reactnative.dev/docs/shadow-props 을 사용 가능하기는 했지만, 세부적인 디테일은 iOS 에서만 사용이 가능하고, Android 에서는 elevation 을 사용했어야 했습니다.

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      android: {
        elevation: 4,
      },
      ios: {
        shadowColor: 'black',
        shadowRadius: 4,
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
      },
    }),
  },
});

하지만 이제는 boxShadow 스타일을 사용하면, 크로스 플랫폼에 걸맞는 그림자 스타일을 추가할 수 있다고 합니다.

const styles = StyleSheet.create({
  container: {
    boxShadow: "5 5 5 0 rgba(255, 0, 0, 0.5)"
  },
  box: {
    boxShadow: {
      offsetX: 5,
      offsetY: 5,
      blurRadius: 5,
      spreadDistance: 0,
      color: "rgba(255, 0, 0, 0.5)",
    } 
  },
});

Limitations & Spec Deviations

  • The default shadow color is black, not the parent’s color
  • Android normal shadows are supported on Android 9+
  • Android inset shadows are supported on Android 10+

filter

CSS 와 같은 이미지 필터입니다. 이제 blur 등도 네이티브 모듈 없이 바로 처리가 가능하겠네요 🥹
자세한 내용은 https://reactnative.dev/blog/2024/10/23/release-0.76-new-architecture#filter 에서 참고하세요!

Limitations and Spec Deviations

  • iOS filter only supports brightness and opacity
  • iOS filter will not apply to shadows, outlines, or any other graphical elements outside the bounds of the element
  • Android blur and drop-shadow are only supported on Android 12+
  • filter implies overflow: hidden, so children of an element with a filter will be clipped if they are positioned outside of the parents bounds.

Breaking changes

Others

  • 이전에 발표한 Frameworks 정책에 따라서, react-native 의 의존성에서 @react-native-community/cli 가 제거되었습니다.
    만약 cli 의 명령어를 프로젝트에서 별도로 사용중이었다면, 0.76 버전부터는 앱 프로젝트의 package.json 에 의존성으로 추가해야 합니다.

Android

iOS

Others

추가로 눈여겨볼만한 기타 변경사항들은 다음과 같습니다.

제가 관리하는 채팅과 관련된 UI 라이브러리에서도 0.6x 마지막 버전 즈음의 new architecture 에서는 레이아웃이 깨지거나 터치 영역이 제대로 안잡히는 문제들이 있었으나, 현재는 99% 가 버그없이 잘 동작합니다.

심지어 이제 새로운 스타일들이 추가되거나, 기존에 한쪽의 플랫폼에서만 동작하던 direction 과 같은 프롭들도 Fabric 에서는 양쪽 모두에서 지원이 됩니다. 이를 Old architecture 에 적용해주는 백포트에 대한 계획도 없어보여서, 이제는 새로운 아키텍쳐 도입을 더이상 미룰 수 없어 보이네요!

profile
HYUNGU, KANG
JavaScript, TypeScript and React-Native
이전 포스트

[RN CheatSheet] New architecture 비활성화 하기

다음 포스트

[RN Cheat-Sheet] Interop Layer

post-custom-banner

0개의 댓글