Flipper가 포함된 React Native 0.62 발표

March 26, 2020 · 9 min read

Facebook의 React Native 코어 개발자

오늘 우리는 Flipper를 기본적으로 지원하는 React Native 버전 0.62를 출시한다.

이번 릴리스는 전 세계적인 팬데믹 상황 속에서 이루어졌다. 이 버전을 오늘 출시하는 이유는 이번 릴리스를 가능하게 한 수백 명의 기여자들의 노력을 존중하고, 릴리스가 master 브랜치에서 너무 멀어지지 않도록 하기 위해서다. 이슈 해결에 기여할 수 있는 인력이 제한적이라는 점을 고려해, 필요하다면 업그레이드를 잠시 미루는 것도 고려해 보길 바란다.

기본 제공되는 Flipper

Flipper는 모바일 앱 디버깅을 위한 개발자 도구다. Android와 iOS 커뮤니티에서 널리 사용되며, 이번 릴리스에서는 새롭거나 기존의 React Native 앱에서 기본적으로 지원하도록 설정했다.

React Native용 Flipper 스크린샷

Flipper는 기본적으로 다음과 같은 기능을 제공한다:

Metro Actions: 툴바에서 바로 앱을 리로드하거나 개발자 메뉴를 실행한다.
Crash Reporter: Android와 iOS 기기에서 발생한 크래시 리포트를 확인한다.
React DevTools: 최신 버전의 React DevTools를 다른 도구들과 함께 사용한다.
Network Inspector: 기기 애플리케이션이 만든 모든 네트워크 요청을 확인한다.
Metro and Device Logs: Metro와 기기에서 발생한 모든 로그를 확인하고 검색하며 필터링한다.
Native Layout Inspector: React Native 렌더러가 출력한 네이티브 레이아웃을 확인하고 편집한다.
Database and Preference Inspectors: 기기의 데이터베이스와 환경설정을 확인하고 편집한다.

또한 Flipper는 확장 가능한 플랫폼이기 때문에, NPM에서 플러그인을 가져오는 마켓플레이스를 제공한다. 이를 통해 여러분의 워크플로우에 특화된 커스텀 플러그인을 게시하고 설치할 수 있다. 사용 가능한 플러그인은 여기에서 확인할 수 있다.

더 많은 정보는 Flipper 문서를 참고한다.

새로운 다크 모드 기능

사용자의 선호 색상 테마(라이트 또는 다크)와 같은 외관 설정에 접근할 수 있는 새로운 Appearance 모듈을 추가했다.

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // 다크 색상 테마 사용
}

또한 사용자 설정의 상태 업데이트를 구독할 수 있는 훅도 추가했다:

import {Text, useColorScheme} from 'react-native';

const MyComponent = () => {
  const colorScheme = useColorScheme();
  return <Text>useColorScheme(): {colorScheme}</Text>;
};

더 자세한 내용은 Appearance와 useColorScheme 문서를 참고한다.

Apple TV를 react-native-tvos로 이전

Lean Core 프로젝트의 일환으로, 그리고 React Native Windows와 React Native macOS 같은 다른 플랫폼과 일관성을 유지하기 위해, 코어에서 Apple TV 전용 코드를 제거하기 시작했다.

앞으로 React Native의 Apple TV 지원은 react-native-community/react-native-tvos와 해당 react-native-tvos NPM 패키지에서 관리될 예정이다. 이 저장소는 Apple TV를 지원하기 위해 필요한 변경 사항만 포함한 메인 저장소의 완전한 포크 버전이다.

react-native-tvos의 릴리스는 React Native의 공개 릴리스를 기반으로 한다. 이번 react-native 0.62 릴리스에서는 Apple TV 프로젝트를 react-native-tvos 0.62로 업그레이드해야 한다.

업그레이드 지원 강화

0.61 버전이 출시되었을 때, 커뮤니티는 React Native의 새로운 버전으로 업그레이드하는 개발자를 지원하기 위해 업그레이드 헬퍼 도구를 선보였다. 이 도구는 현재 사용 중인 버전과 목표 버전 간의 변경 사항을 비교하여 특정 업그레이드에 필요한 수정 사항을 확인할 수 있게 해준다.

하지만 이 도구를 사용하더라도 업그레이드 과정에서 문제가 발생할 수 있다. 이를 해결하기 위해 Upgrade-Support를 공개하며 더 전문화된 업그레이드 지원을 제공한다. Upgrade Support는 GitHub 이슈 트래커로, 사용자가 프로젝트를 업그레이드하는 과정에서 발생한 문제를 제출하고 커뮤니티의 도움을 받을 수 있다.

우리는 업그레이드 경험을 지속적으로 개선하기 위해 노력하고 있으며, 이러한 도구들이 아직 다루지 못한 특수한 경우에도 사용자들이 필요한 지원을 받을 수 있기를 바란다.

기타 개선 사항

LogBox: 새로운 LogBox 오류 및 경고 경험을 선택적으로 추가했다. 이를 활성화하려면 index.js 파일에 require('react-native').unstable_enableLogBox()를 추가한다.
React DevTools v4: 최신 React DevTools로 업그레이드했다. 이는 성능 향상, 개선된 네비게이션 경험, React Hooks에 대한 완전한 지원을 제공한다.
접근성 개선: accessibilityValue 추가, Touchables에 누락된 props 추가, onSlidingComplete 접근성 이벤트 추가, Switch 컴포넌트의 기본 역할을 "button"에서 "switch"로 변경하는 등 접근성 관련 개선 사항을 적용했다.

주요 변경 사항

PropTypes 제거: React Native 코어의 앱 크기 영향을 줄이고, 런타임이 아닌 컴파일 타임에 타입을 검사하는 정적 타입 시스템을 선호하기 위해 코어 컴포넌트에서 propTypes를 제거한다.
accessibilityStates 제거: 더 의미론적으로 풍부한 방식으로 컴포넌트의 상태 정보를 접근성 서비스에 전달할 수 있는 새로운 accessibilityState 프로퍼티를 도입하면서, 더 이상 사용되지 않는 accessibilityStates 프로퍼티를 제거했다.
TextInput 변경 사항: TextInput에서 드물게 사용되고, W3C 표준을 준수하지 않으며, Fabric에서 구현하기 어려운 onTextInput을 제거했다. 또한 문서화되지 않은 inputView 프로퍼티와 selectionState도 제거했다.

사용 중단 예정 기능

AccessibilityInfo.fetch는 이미 사용 중단 예정이었지만, 이번 릴리스에서 경고 메시지를 추가했다.
useNativeDriver 설정은 이제 필수로 지정했다. 이는 향후 기본값 전환을 지원하기 위함이다.
Animated 컴포넌트의 ref는 이제 내부 컴포넌트를 참조하며, getNode는 사용 중단 예정으로 지정했다.

감사의 말

0.62 버전을 가능하게 해준 수많은 기여자 여러분께 감사드립니다!

모든 업데이트 내용을 확인하려면 0.62 변경 로그를 참고하세요.

기본 제공되는 Flipper​

새로운 다크 모드 기능​

Apple TV를 react-native-tvos로 이전​

업그레이드 지원 강화​

기타 개선 사항​

주요 변경 사항​

사용 중단 예정 기능​

감사의 말​