React Native 0.67 릴리스에 대한 기대감이 여전히 뜨거운 가운데, 지난 반년 동안 커뮤니티가 이룬 성과를 축하하고, React Native의 미래를 위한 비전을 공유하고자 한다.

여러분, 새해 복 많이 받으세요! 오늘 우리는 React Native의 최신 버전인 0.67.0을 발표하고, 지난 몇 달 동안 작업해 온 릴리스 프로세스에 대한 업데이트를 공유하려고 합니다.

주요 섹션​

• 0.67 버전의 주요 기능
• 릴리스 프로세스 개선 사항
• React Native의 새로운 릴리스 안정화에 기여하고 싶으신가요?

2019년 Hermes를 발표한 이후, 커뮤니티에서 점점 더 많은 사람들이 이를 채택하고 있다. React Native 앱을 위한 인기 메타 프레임워크를 관리하는 Expo 팀은 최근 Hermes에 대한 실험적 지원을 발표했다. 이 기능은 Expo에서 가장 많이 요청된 기능 중 하나였다. 인기 있는 모바일 데이터베이스인 Realm 팀도 최근 Hermes에 대한 알파 지원을 출시했다. 이 글에서는 지난 2년간 Hermes를 React Native를 위한 최고의 JavaScript 엔진으로 만들기 위해 이루어낸 주요 성과를 소개한다. 앞으로 이러한 개선 사항과 더 많은 발전을 통해 Hermes가 모든 플랫폼에서 React Native의 기본 JavaScript 엔진이 될 수 있을 것이라 확신한다.

오늘 우리는 안드로이드 12와 iOS 15 지원을 포함한 React Native v0.66을 출시한다. 이번 버전에는 다양한 수정 사항과 일반 업데이트가 포함되어 있다.

주요 내용​

• Android에서 부모 경계 밖의 뷰 탭 처리
• Android의 새로운 블루투스 권한
• Apple Silicon, Xcode 13, iOS 15에 대한 향상된 지원
• Hermes 0.9.0
• Nightly 및 "Commitly" 릴리스

안녕하세요, 여러분!

올해 말 출시 예정인 새로운 모바일 OS 버전에 대비해, React Native 앱을 미리 준비해 두는 것을 추천합니다. 이렇게 하면 일반적으로 사용 가능해질 때 발생할 수 있는 문제를 미리 방지할 수 있습니다.

최근 React Native의 다중 플랫폼 비전을 공유하며, React를 다른 플랫폼으로 확장하는 것이 어떻게 모든 사용자에게 도움이 되는지 설명했다. 지난 몇 년간 마이크로소프트와 함께 React Native for Windows 및 macOS를, 오큘러스와 함께 VR 환경에서의 React Native를 개발하며 이 비전을 실현하기 위해 큰 진전을 이루었다.

올해 초부터 시작한 계획의 일환으로, 이 플랫폼들에 대한 집중을 높이고 팀 규모를 확장해 비전을 달성하기 위해 노력하고 있다. 새로운 팀원들과 앞으로 합류할 많은 이들을 지원하기 위해 두 명의 엔지니어링 매니저를 채용한다: 한 명은 React Native for Desktop을 지원하고, 다른 한 명은 React Native for VR을 지원할 예정이다.

우리는 엔지니어들의 성장과 성공에 깊은 관심을 가지고, 우리의 비전에 열정을 가진 매니저를 찾고 있다. React 또는 React Native 경험이 필수는 아니다. 이 역할은 미국 내 어디에서든 지원 가능하다. 이 기회가 흥미롭게 느껴지고 더 알아보고 싶다면, Facebook 채용 페이지에서 지원할 수 있다. 여러분의 연락을 기다린다!

React Native는 페이스북과 업계 전반에서 모바일 개발의 기준을 크게 높이는 데 성공했다. 우리가 컴퓨터와 새로운 방식으로 상호작용하고 새로운 기기가 등장함에 따라, React Native가 모두를 위해 존재하기를 바란다. React Native가 처음에는 모바일 앱 개발을 위해 만들어졌지만, 다양한 플랫폼에 초점을 맞추고 각 플랫폼의 강점과 제약을 고려해 개발하는 것이 상호 시너지 효과를 낸다고 믿는다. 이 기술을 데스크톱과 가상 현실로 확장했을 때 큰 이점을 확인했으며, 이게 React Native의 미래에 어떤 의미를 지니는지 공유하게 되어 기쁘다.

지난 한 해 동안 우리 세상에는 많은 변화가 있었고, React Native도 예외는 아니었다. 우리 팀에는 새로운 멤버들이 합류했고(얼른 직접 만나고 싶다!), 프로젝트들은 성숙해졌으며 새로운 기회들이 생겨났다. 이 모든 것을 이번 글과 앞으로의 글들을 통해 여러분과 공유하게 되어 기쁘다.

페이스북에서는 팀이 반년 단위로 사이클을 돌며 일한다. 매 반년마다 전략을 검토하고 계획을 세우며 내부적으로 공유한다. 오늘 우리는 커뮤니티를 위해 H2 계획을 공유하고자 한다.

2021년 H2는 React Native에게 흥미로운 시기다. 우리의 주요 관심사는 커뮤니티 육성, 새로운 아키텍처를 오픈소스에 롤아웃하기 시작하는 것, 그리고 기술을 앞으로 나아가게 하는 것이다.

오늘 우리는 React Native 버전 0.65를 출시했다. 이번 버전에는 새로운 Hermes 버전, 접근성 개선, 패키지 업그레이드 등이 포함되어 있다.

Hermes 0.8의 새로운 기능​

페이스북의 오픈소스 JavaScript VM인 Hermes가 React Native에 최적화된 버전 0.8.1로 업그레이드되었다. 이번 릴리스에서 주목할 만한 기능은 다음과 같다:

• "Hades"라는 새로운 병렬 가비지 컬렉터가 도입되어 64비트 디바이스에서 최대 30배 짧은 일시 정지 시간을 제공한다. 페이스북 내부 테스트에서 CPU 집약적인 작업 성능이 20%~50% 향상된 것으로 나타났다. Hades에 대한 자세한 내용은 여기서 확인할 수 있다.
• ECMAScript 국제화 API(ECMA-402, 또는 Intl)이 이제 안드로이드용 Hermes에 기본으로 내장되었다. 각 API의 크기 오버헤드는 57~62K로, JSC의 6MiB에 비해 훨씬 작다. 이 변경으로 Hermes 사용자는 더 이상 locale 폴리필이 필요하지 않다. 이 구현을 주도한 @mganandraj와 마이크로소프트의 파트너들에게 감사한다!
• iOS용 Hermes가 이제 Apple M1 Mac과 Mac Catalyst를 지원한다!
• SMI(Small Integers)와 포인터 압축을 포함한 메모리 개선으로 JS 힙 크기가 30% 줄어들었다.
• Function.prototype.toString 변경으로 부적절한 기능 감지로 인한 성능 저하 문제가 해결되었고, 소스 코드 주입 사용 사례를 지원한다.

전체 Hermes 변경 로그는 여기서 확인할 수 있다.

아직 Hermes를 사용하지 않았다면 여기서 안내하는 단계를 따라 앱에 Hermes를 적용해 새로운 기능과 성능 향상을 경험해 보자!

접근성 개선 및 추가 기능​

지난해 페이스북은 GAAD 서약을 통해 React Native 내 접근성을 개선하기로 약속했다. 0.65 버전에서는 이 서약의 결과물과 기타 접근성 관련 성과를 공유한다! 주요 변경 사항은 다음과 같다:

• iOS에서 고대비 라이트 및 다크 값을 지정할 수 있도록 허용. 자세한 내용은 문서를 참고한다.
• Android에 getRecommendedTimeoutMillis API 추가. 이는 Android 접근성 옵션에서 설정한 사용자의 기본 타임아웃 값을 노출하며, 컨트롤을 검토하거나 접근하는 데 추가 시간이 필요한 사용자를 위한 기능이다.
• TalkBack/VoiceOver가 disabled 및 unselected와 같은 UI 상태를 올바르게 알리도록 일반적인 수정 작업 진행.

진행 중인 접근성 이슈를 확인하거나 기여할 수 있다!

주요 의존성 버전 업데이트 및 주의사항​

• react-native-codegen 버전 0.0.7을 package.json의 devDependency로 추가해야 한다.
• JCenter가 종료되어 이제 읽기 전용 상태다. JCenter를 maven 저장소에서 제거하고, MavenCentral과 Jitpack을 사용하도록 의존성을 업데이트했다.
• OkHttp를 v3에서 v4.9.1로 업그레이드했다. 변경사항에 대한 자세한 내용은 Upgrading to OkHttp 4를 참고한다.
• Xcode 12.5를 지원하기 위해 Flipper를 0.93으로 업그레이드했다. 변경 내역은 Flipper changelog here에서 확인할 수 있다.
• Android Gradle Plugin 7 지원이 추가되었다.
• Apple Silicon에서는 링커 문제를 해결해야 한다. 자세한 내용은 @mikehardy’s note를 참고한다.

감사합니다!​

이번 릴리스에는 61명의 기여자가 1100개 이상의 커밋을 작성했다. 이번 릴리스를 지원하고 기여한 모든 분께 감사드린다! 전체 변경 내역은 여기에서 확인할 수 있다.

페이스북이 GAAD Pledge를 통해 React Native의 접근성을 개선하겠다고 약속한 지 1년이 되었다. 이 프로젝트는 우리의 기대를 뛰어넘는 성과를 거두었다. 우리는 이 프로젝트가 2021년에도 계속될 것임을 발표하게 되어 기쁘며, 지금까지의 진행 상황을 모두에게 공유하고자 한다. 지난해 React Native의 접근성 격차를 철저히 분석한 후, 이러한 격차를 해소하기 위한 작업이 시작되었다.

우리는 90개의 중요 격차 분석 이슈로 시작했으며, 2021년 3월 GitHub에서 프로젝트가 시작된 이후 현재까지 다음과 같은 성과를 거두었다:

• 커뮤니티가 11개의 이슈를 해결했다.

• React Native 팀이 19개의 이슈를 평가하고 해결했다.

• 9개의 풀 리퀘스트가 병합되었다.

• React Native 문서에 1개의 풀 리퀘스트가 병합되었다.

지난 1년간 더 나은 React Native 접근성을 위해 큰 진전을 이룬 React Native 커뮤니티에 감사와 존경을 표한다. 모든 기여자의 노력이 React Native 접근성 개선에 중요한 역할을 했다.

수정 사항​

9개의 풀 리퀘스트를 통해 여러 컴포넌트에서 두 가지 유형의 이슈가 해결되었고, API에 새로운 기능이 추가되었습니다.

• 7개의 컴포넌트에서 비활성 상태(Disabled state)와 관련된 이슈가 해결되었습니다.

• 2개의 컴포넌트에서 선택 상태(Selected state)와 관련된 이슈가 해결되었습니다.

• React Native API에 새로운 기능이 추가되어 AccessibilityManager.getRecommendedTimeoutMillis()를 쿼리할 수 있는 기능이 추가되었습니다.

비활성화 상태 알림 및 비활성화 기능​

간극 분석 과정에서 발견된 가장 흔한 문제 중 하나는 일부 컴포넌트가 기능을 알리지 않거나 비활성화하지 않는 것이었다. 이제 일곱 개의 컴포넌트가 비활성화 상태를 알리거나 클릭 기능을 비활성화한다.

비활성화 시 알림

• Button - #31001

• Images - #31252

• ImageBackground - #31252

비활성화 prop이 있을 때 클릭 기능 비활성화

• Button - #31001

• Text - React Native Team commit

• Pressable - React Native Team commit

• TouchableHighlight - #31135

• TouchableOpacity - #31108

• TouchableNativeFeedback - #31224

• TouchableWithoutFeedback - #31297

선택 상태 알림 개선​

포커스 상태에서 선택 상태를 알리지 않던 일부 컴포넌트들이 있었습니다. 이 문제는 컴포넌트가 포커스 상태일 때 AccessibilityState가 selected로 설정되거나 컴포넌트가 selected로 변경될 때 알림이 발생하도록 수정되었습니다.

선택 상태 알림이 추가된 컴포넌트:

• Button - #31001

• TextInput - #31144

접근성 타임아웃 설정​

이전에는 Android에서 접근성 타임아웃 설정을 조회할 방법이 없었다. 이번 수정으로 AccessibilityManager.getRecommendedTimeoutMillis()를 통해 조회할 수 있게 되었다. 이 기능은 UI 엘리먼트가 자동으로 사라지거나 진행되기 전의 "조치 시간"을 조회한다.

문서 업데이트​

React Native 문서는 사용 가능한 API에 추가되거나 변경된 사항을 반영하기 위해 업데이트해야 한다. React Native 문서의 새로운 추가 내용은 AccessibilityInfo에 getRecommendedTimeoutMillis()가 추가된 것을 다룬다.

커뮤니티 기여​

아래에 소개된 모든 기여자들에게 깊은 감사를 전한다. 풀 리퀘스트를 제출하고 머지한 분들, 그리고 이슈를 리뷰하고 코멘트를 남긴 모든 분들의 노력에 감사드린다.

병합된 풀 리퀘스트​

• @huzaifaaak 님이 3개의 이슈를 처리했습니다:
  • 버튼 접근성에 talkback 지원 추가: disabled prop #31001
  • 접근성/버튼 테스트 #31189
• @natural_clar 님이 1개의 이슈를 처리했습니다:
  • 기능: TouchableHighlight이 비활성화될 때 accessibilityState를 disabled로 설정 #31135
• fabriziobertoglio1987 님이 2개의 이슈를 처리했습니다:
  • [Android] TextInput 컴포넌트가 선택되었을 때 선택 상태가 알려지지 않는 문제 #31144
  • 접근성 수정: 이미지가 "disabled" 상태를 알려주지 않는 문제 #31252
• @kyamashiro73 님이 1개의 이슈를 처리했습니다:
  • TouchableNativeFeedback 접근성에 talkback 지원 추가: disabled prop #31224
• @grgr-dkrk 님이 1개의 이슈를 처리하고 React Native 문서에 추가했습니다:
  • AccessibilityInfo에 getRecommendedTimeoutMillis 추가 #31063
  • 기능: accessibilityInfo에 getRecommendedTimeoutMillis 섹션 추가 #2581
• @crloscuesta 님이 1개의 이슈를 처리했습니다:
  • TouchableWithoutFeedback이 비활성화될 때 accessibilityState를 비활성화 #31297
• @chakrihacker 님이 1개의 이슈를 처리했습니다:
  • 접근성 disabled가 설정될 때 TouchableOpacity를 비활성화 #31108

다른 방식으로 시간을 내어 기여한 커뮤니티 멤버들에게 감사드립니다!

Simek, saurabhkacholiya, meehawk, intergalacticspacehighway, chrisglein, jychiao, 그리고 Waltari10

함께 참여하세요!​

우리는 많은 진전을 이루었지만 아직 끝내지 못했습니다. 마무리하기 위해 여러분의 도움이 필요합니다. Facebook의 React Native 팀은 접근성 격차 분석 이슈를 해결하는 기여자들을 지원하기로 약속했습니다. 그들은 접근성 이슈에 대한 댓글에 계속 응답하고 풀 리퀘스트를 처리할 예정입니다. React Native 팀은 또한 가장 어려운 접근성 격차 분석 이슈 중 일부를 해결하고 있습니다. 이 작업에는 접근성 역할(accessibilityRoles)을 다른 언어로 정확히 번역하는 것과 특정 컴포넌트에 대한 오류 텍스트를 명시하는 것이 포함됩니다.

나머지 작업을 함께 해결해 보세요. 개선된 React Native 접근성 프로젝트 보드에는 아직 해결되지 않은 접근성 이슈가 남아 있습니다. 체크/언체크 상태, 컬렉션 진입/퇴장, 그리고 컬렉션 내 위치와 같은 이슈들은 현재와 새로운 기여자들이 더 접근성 높은 React Native를 만들기 위해 기여할 수 있는 좋은 기회입니다.

더 알아보기​

갭 분석이 어떻게 진행되었는지 Facebook Tech 블로그에서 읽어보거나, GitHub 이슈 출시에 관한 내용을 React Native 블로그에서 확인할 수 있다.