React Native 접근성 개선을 위해 GitHub 커뮤니티에 간격 분석과 이슈 목록을 공유한 지 4주가 지났다. React Native 커뮤니티의 도움으로 접근성 개선 작업은 이미 큰 진전을 이루고 있다. 커뮤니티 멤버들은 기여자를 지원하고, 테스트를 검토하며, 이전의 접근성 이슈에 주목하고 있다. 3월 8일 이후로 커뮤니티는 6개의 이슈를 해결했고, 4개의 풀 리퀘스트를 완료했다. 또한 7개의 풀 리퀘스트가 검토를 위해 대기 중이다.

이 작업이 진행되는 동안 Facebook의 React Native와 접근성 팀은 이 프로젝트 이전에 제출된 접근성 버그와 이슈를 평가하고 있다. 이들은 현재의 간격 분석으로 이미 해결되었는지, 아니면 프로젝트에 추가로 포함해야 할 이슈가 있는지 확인 중이다. 이미 새로운 이슈 하나가 발견되어 프로젝트에 추가되었고, 4개의 이슈는 기존 이슈와 직접적으로 연결되었다. 또한 2개의 이슈는 근본 원인을 해결함으로써 곧 종료될 예정이다.

참여해 준 모든 커뮤니티 멤버들에게 감사드린다. 여러분의 노력이 React Native를 모두에게 더 접근 가능한 도구로 만드는 데 큰 기여를 하고 있다!

오늘 우리는 iOS에서 Hermes를 지원하는 React Native 0.64를 출시한다.

iOS에서 Hermes 선택적 사용​

Hermes는 React Native 실행을 최적화한 오픈소스 자바스크립트 엔진이다. 메모리 사용량을 줄이고, 다운로드 크기를 줄이며, 앱이 사용 가능해지는 시간(Time to Interactive, TTI)을 단축함으로써 성능을 향상시킨다.

이번 릴리즈에서 iOS에서도 Hermes를 사용해 빌드할 수 있게 되었다는 소식을 전한다. iOS에서 Hermes를 활성화하려면 Podfile에서 hermes_enabled를 true로 설정하고 pod install을 실행하면 된다.

use_react_native!(
   :path => config[:reactNativePath],
   # iOS에서 Hermes를 활성화하려면 `false`를 `true`로 변경하고 pods를 설치한다
   :hermes_enabled => true
)

iOS에서의 Hermes 지원은 아직 초기 단계임을 유의해야 한다. 추가 벤치마킹을 진행 중이므로 선택적으로 사용할 수 있도록 했다. 여러분의 애플리케이션에서 직접 시도해보고 결과를 알려주길 바란다!

기본값으로 활성화된 인라인 요구(Inline Requires)​

인라인 요구는 Metro의 설정 옵션 중 하나로, JavaScript 모듈의 실행을 앱 시작 시점이 아니라 실제 사용 시점으로 지연시켜 시작 시간을 단축한다.

이 기능은 몇 년 전부터 선택적 설정 옵션으로 존재해왔으며, 문서의 성능 섹션에서 추천해왔다. 이제는 새로운 애플리케이션에서 기본값으로 활성화되어, 추가 설정 없이도 빠른 React Native 애플리케이션을 만들 수 있도록 돕는다.

인라인 요구는 Babel 변환 기능으로, 모듈 임포트를 인라인 형태로 변환한다. 예를 들어, 인라인 요구는 파일 상단에 위치한 모듈 임포트를 실제 사용되는 위치로 이동시킨다.

변경 전:

import {MyFunction} from 'my-module';

const MyComponent = props => {
  const result = MyFunction();

  return <Text>{result}</Text>;
};

변경 후:

const MyComponent = props => {
  const result = require('my-module').MyFunction();

  return <Text>{result}</Text>;
};

인라인 요구에 대한 더 자세한 정보는 성능 문서에서 확인할 수 있다.

Chrome에서 Hermes 트레이스 확인하기​

지난 한 해 동안 Facebook은 Major League Hacking fellowship을 후원하며 React Native에 기여할 수 있는 기회를 제공했다. Jessie Nguyen과 Saphal Patro는 Chrome DevTools의 Performance 탭을 사용해 Hermes를 사용 중인 애플리케이션의 실행 과정을 시각화할 수 있는 기능을 추가했다.

자세한 내용은 새로운 문서 페이지를 참고한다.

프록시 지원이 추가된 Hermes​

Hermes에 프록시 지원 기능을 추가해 react-native-firebase와 mobx 같은 인기 커뮤니티 프로젝트와의 호환성을 확보했다. 기존에 이 패키지들을 사용 중이라면 이제 프로젝트에서 Hermes로 마이그레이션할 수 있다.

다가오는 릴리스에서 Hermes를 Android의 기본 자바스크립트 엔진으로 지정할 예정이므로, Hermes 사용 시 남아 있는 문제점들을 해결하기 위해 노력 중이다. 여러분의 앱이 Hermes를 도입하는 데 걸림돌이 되는 문제가 있다면 Hermes GitHub 저장소에 이슈를 등록해 주세요.

React 17​

React 17은 개발자에게 새로운 기능을 추가하거나 주요 변경 사항을 포함하지 않는다. React Native 애플리케이션의 경우, 주요 변경 사항은 새로운 JSX 변환으로, 이제 파일에서 JSX를 사용하기 위해 React를 임포트할 필요가 없어졌다.

React 17에 대한 더 많은 정보는 React 블로그에서 확인할 수 있다.

주요 의존성 버전 변경 사항​

• Android API 레벨 16-20 지원 중단. Facebook 앱은 사용량이 충분히 낮은 Android 버전에 대한 지원을 지속적으로 중단한다. Facebook 앱이 더 이상 이 버전들을 지원하지 않고, React Native의 주요 테스트 환경이기 때문에 React Native도 지원을 중단한다.
• Xcode 12와 CocoaPods 1.10이 필수로 요구된다.
• 최소 Node 지원 버전이 10에서 Node 12로 상향 조정되었다.
• Flipper 버전이 0.75.1로 업데이트되었다.

감사의 말​

0.64 버전을 만드는 데 도움을 준 수백 명의 기여자들에게 감사드립니다! 0.64 변경 로그에서 이번 릴리스에 포함된 모든 변경 사항을 확인할 수 있습니다.

안녕하세요, React Native 커뮤니티 여러분,​

2020년 5월, Facebook은 GAAD 서약을 처음으로 이행한 기업이 되었다. 이를 통해 Facebook은 접근성을 React Native 오픈소스 프로젝트의 핵심 부분으로 만들겠다는 약속을 했다. 5월 이후로 Facebook은 React Native 내의 접근성 격차를 신중하게 검토하고 문서화하는 데 시간을 투자했다. 지금까지의 격차 분석 결과 90개의 이슈가 발견되었으며, 이 모든 이슈는 GitHub 이슈로 변환되었다.

전반적으로, React Native API는 접근성을 강력하게 지원한다고 판단했다. 그러나 많은 핵심 컴포넌트가 아직 플랫폼의 접근성 API를 완전히 활용하지 못하며, 일부 플랫폼 특화 기능에 대한 지원이 부족하다는 점도 발견했다.

React Native의 개발에는 항상 기여자들의 열정과 다양성이 중요한 역할을 해왔다. 이러한 접근성 격차는 현재와 새로운 기여자들에게 훌륭한 기회가 될 것이다. React Native에 기여하고 싶었던 분들이라면, React Native를 더 접근성 있게 만드는 데 함께 참여해주길 권한다.

기여자들의 노력을 인정하기 위해, 접근성 이슈가 해결되고 풀 리퀘스트에 연결되면, 커뮤니티 매니저가 트위터를 통해 기여자들을 언급할 예정이다. 코드베이스에 풀 리퀘스트가 반영된 기여자들은 React Native 블로그의 월간 이슈 업데이트에서 소개될 것이다.

모두가 더 쉽게 사용할 수 있는 React Native를 만들기 위해 함께해주길 바란다.

여러분이 도울 수 있는 방법:​

• 새로운 기여자는 기여 가이드를 읽고, React Native GitHub에서 46개의 좋은 첫 이슈 목록을 살펴보세요.

• 조금 더 노력이 필요한 이슈에 관심이 있는 기여자는 Improved React Native Accessibility 프로젝트 페이지를 방문해 React Native 지식이 필요한 GitHub 이슈를 확인하세요.

• React Native 문서를 업데이트해 접근성 격차를 해결하고자 하는 기술 작가 분들은 React Native Docs를 방문해 보세요.

• 이 프로젝트를 도울 수 있는 사람들에게 공유해 주세요!

• GAAD Pledge Open Source Accessibility Community Manager for React Native의 최신 소식을 알고 싶다면 Twitter나 Facebook을 팔로우하세요.

지난해 우리는 React Native 문서를 어떻게, 언제 사용하는지 더 잘 이해하기 위해 사용자 인터뷰를 진행하고 설문조사를 실시했다. 24건의 인터뷰와 3000건 이상의 설문 응답을 통해 얻은 데이터와 인사이트를 바탕으로 React Native 문서를 개선했으며, 오늘 그 결과를 공유하게 되어 기쁘다:

• 새로운 시작 가이드 모바일 개발 경험이 없는 사람들을 위해 네이티브 컴포넌트가 무엇인지 설명하는 새로운 시작 가이드를 출시했다. 또한 React 입문자를 위한 리프레셔/소개도 포함했다.
• 새로운 테스트 가이드 Vojtech Novak와 함께 작업해 React Native 워크플로에서 다양한 테스트 전략과 그 작동 방식을 소개하는 삽화가 포함된 새로운 테스트 가이드를 만들었다.
• 새로운 보안 가이드 Kadi Kraman과 함께 React Native 환경에서의 보안 기본 개념과 최고의 솔루션을 설명하는 삽화가 포함된 새로운 보안 가이드를 제작했다.
• 더 많은 삽화 추가 새로운 Pressable과 React Native 컴포넌트 소개 문서를 포함해 멋진 삽화를 추가했다.
• https://reactnative.dev 5년 만에 드디어 우리만의 도메인으로 이전했다! reactnative.dev는 브라우저 주소창에서 자동 완성이 더 쉽고, 이전 github.io 주소보다 입력하기 편리하다.
• 사이트 디자인 및 구조 개선 가이드를 더 잘 표시하고 분류하며, API 레퍼런스의 내용을 더 읽기 쉽게 만들기 위해 디자인과 사이트 구조를 업데이트했다. 특히 Bartosz Kaszubowski의 세심한 주의와 협업 덕분에 많은 변화를 빠르게 이뤄냈다.
• 핵심 컴포넌트 및 API 문서 업데이트 문서 개선 프로젝트를 진행해 레퍼런스 문서를 업데이트했다! Marta Dabrowka, Abraham Nnaji, Ahmed Talaat El-Hager, Mohamed Abdel Nasser Abdou, Danilo Britto, Mitul Savani, Kaio Duarte, Pablo Espinosa, Jesse Katsumata, I Gede Agastya Darma Laksana, Sebastião Bruno Kiafuka Fernando, Miguel Bolivar, Dani Akash, Luiz Celso de Faria Alves, 그리고 Bartosz Kaszubowski를 포함한 모든 참여자들의 기여로 0.62 버전 출시 전에 모든 문서를 업데이트하고 Snack 예제를 추가할 수 있었다. 이제 React Native 문서는 그 어느 때보다 최신이고 완벽하다.
• PR 계속 보내주세요! 매주 열려 있는 PR을 10개 미만으로 유지하고 있다! PR을 보내준 모든 분들께 감사드린다.

인터뷰와 설문조사에 참여해주신 분들, 그리고 문서 작업에 기여해주신 모든 분들께 진심으로 감사드린다. 여러분의 협력 덕분에 이 모든 것이 가능했다.

Facebook의 React Native 팀은 React Native 작업의 우선순위를 결정하는 데 도움이 되는 원칙을 따릅니다. 이 원칙들은 우리 팀의 특성을 반영하며, React Native 커뮤니티의 모든 이해관계자를 대표하지는 않습니다. 우리는 이러한 원칙을 공유함으로써 무엇이 우리를 움직이는지, 어떻게 결정을 내리는지, 그리고 어떤 부분에 집중하는지에 대해 더 투명하게 설명하고자 합니다.

네이티브 경험 구현​

React Native의 최우선 목표는 각 플랫폼에 대한 사용자의 기대를 충족하는 것이다. 이 때문에 React Native는 플랫폼의 기본 요소를 렌더링한다. 크로스 플랫폼 일관성보다 네이티브의 외관과 동작을 더 중요하게 여긴다.

예를 들어, React Native의 TextInput은 iOS에서 UITextField로 렌더링된다. 이를 통해 패스워드 관리자와 키보드 컨트롤과의 통합이 바로 동작한다. 플랫폼 기본 요소를 사용함으로써 React Native 앱은 Android와 iOS의 새로운 릴리스에서 발생하는 디자인 및 동작 변화에도 빠르게 대응할 수 있다.

네이티브 앱의 외관과 동작을 구현하려면 성능도 일치시켜야 한다. 이 부분에 가장 야심 찬 노력을 기울이고 있다. 예를 들어, Facebook은 Android용 React Native를 위해 처음부터 새로 만든 JavaScript 엔진인 Hermes를 개발했다. Hermes는 React Native 앱의 시작 시간을 크게 개선한다. 또한, 스레딩 모델을 최적화하고 React Native가 네이티브 코드와 더 쉽게 상호작용할 수 있도록 주요 아키텍처 변경 작업도 진행 중이다.

대규모 확장성​

페이스북 앱의 수백 개 화면은 React Native로 구현되었다. 페이스북 앱은 다양한 기기에서 수십억 명의 사용자가 이용한다. 이것이 바로 우리가 대규모에서 가장 어려운 문제들에 집중하는 이유다.

React Native를 앱에 적용하면 소규모에서는 발견하지 못했던 문제들을 식별할 수 있다. 예를 들어, 페이스북은 최신 아이폰부터 여러 세대의 구형 안드로이드 기기까지 다양한 기기에서의 성능 개선에 초점을 맞춘다. 이러한 접근은 Hermes, Fabric, TurboModules와 같은 아키텍처 프로젝트에 영향을 미친다.

React Native가 대규모 조직에서도 확장 가능하다는 것을 입증했다. 수백 명의 개발자가 하나의 앱에서 작업할 때 점진적인 도입은 필수적이다. 이것이 바로 React Native를 한 화면씩 도입할 수 있도록 설계한 이유다. 곧, 기존 네이티브 화면의 개별 네이티브 뷰를 React Native로 마이그레이션하는 기능도 제공할 예정이다.

대규모 확장성에 집중한다는 것은 현재 우리 팀이 다루지 않는 여러 영역이 있다는 것을 의미한다. 예를 들어, 우리 팀은 React Native의 업계 도입을 주도하지 않는다. 또한 대규모에서 발견하지 못한 문제들에 대한 솔루션을 적극적으로 개발하지 않는다. 하지만 많은 파트너와 핵심 기여자들이 커뮤니티를 위해 이러한 중요한 영역에 집중할 수 있다는 점을 자랑스럽게 생각한다.

개발 속도 향상​

탁월한 사용자 경험은 반복적인 과정을 통해 만들어낸다. 코드 변경 결과를 실행 중인 앱에서 몇 초 만에 확인할 수 있어야 한다. React Native의 아키텍처는 개발 중 거의 즉각적인 피드백을 제공한다.

많은 팀이 React Native를 도입해 개발 속도를 크게 향상시켰다고 보고한다. 이러한 팀들은 사소한 변경마다 코딩 세션을 중단할 필요 없이 즉각적인 피드백을 받으면서 다양한 아이디어를 시도하고 추가적인 개선을 더 쉽게 할 수 있다고 말한다. React Native를 개선할 때도 개발자 경험의 이러한 특성을 유지하는 데 주력한다.

즉각적인 피드백은 React Native가 개발 속도를 높이는 유일한 방법이 아니다. 팀은 빠르게 성장하는 고품질 오픈소스 패키지 생태계를 활용할 수 있다. 또한 Android, iOS, 웹 간에 비즈니스 로직을 공유할 수 있다. 이를 통해 업데이트를 더 빠르게 배포하고 플랫폼 팀 간의 조직적 격차를 줄일 수 있다.

모든 플랫폼​

2014년 React Native를 소개하면서 "한 번 배우고, 어디서나 작성하라"는 모토를 제시했다. 여기서 '어디서나'는 정말 어디든을 의미한다. 개발자는 기기 모델이나 운영체제에 제한받지 않고 가능한 한 많은 사용자에게 도달할 수 있어야 한다.

React Native는 모바일, 데스크톱, 웹, TV, VR, 게임 콘솔 등 매우 다양한 플랫폼을 대상으로 한다. 최소 공통 분모를 위해 개발하도록 강요하는 대신, 각 플랫폼에서 풍부한 경험을 제공하는 것을 목표로 한다. 이를 위해 각 플랫폼의 고유 기능을 지원하는 데 초점을 맞춘다. 터치, 펜, 마우스와 같은 다양한 입력 방식부터 VR의 3D 환경과 같은 근본적으로 다른 소비 경험까지 모두 포함한다.

이 원칙은 React Native의 새로운 코어 아키텍처를 크로스 플랫폼 C++로 구현해 플랫폼 간 동등성을 높이기로 한 결정에 영향을 미쳤다. 또한 Windows와 macOS와 같은 다른 플랫폼 관리자를 대상으로 한 공개 인터페이스를 개선하고 있다. 모든 플랫폼이 React Native를 지원할 수 있도록 노력하고 있다.

선언형 UI​

우리는 모든 플랫폼에 동일한 사용자 인터페이스를 배포하는 방식을 지지하지 않는다. 대신, 각 플랫폼의 고유한 기능을 동일한 선언형 프로그래밍 모델로 표현하는 것을 지향한다. 우리의 선언형 프로그래밍 모델은 React다.

경험적으로, React가 대중화한 단방향 데이터 흐름은 애플리케이션을 더 이해하기 쉽게 만든다. 우리는 화면을 명령형으로 관리되는 뷰보다는 선언형 컴포넌트의 조합으로 표현하는 것을 선호한다. React가 웹에서 성공을 거두고, 새로운 네이티브 Android와 iOS 프레임워크의 방향성은 업계가 선언형 UI를 받아들였다는 것을 보여준다.

React는 선언형 사용자 인터페이스를 대중화했다. 그러나 여전히 React만이 해결할 수 있는 많은 문제가 남아 있다. React Native는 React의 혁신 위에 계속 구축되며, 선언형 사용자 인터페이스 운동의 최전선에 머물 것이다.

오늘 우리는 LogBox가 기본적으로 활성화된 상태로 제공되는 React Native 0.63을 출시한다.

LogBox​

React Native 커뮤니티에서 자주 제기되는 피드백은 에러와 경고 메시지를 디버깅하기 어렵다는 점이었다. 이를 해결하기 위해 React Native의 전체 에러, 경고, 로그 시스템을 처음부터 다시 설계했다.

LogBox는 React Native의 redbox, yellowbox, 로깅 경험을 완전히 재설계한 것이다. 0.62 버전에서는 LogBox를 옵트인 방식으로 도입했지만, 이번 릴리스에서는 모든 React Native에서 기본 경험으로 제공한다.

LogBox는 에러와 경고 메시지가 너무 장황하거나 형식이 잘못되었거나, 실행 가능한 조치가 없었던 문제를 해결하기 위해 세 가지 주요 목표에 집중했다:

• 간결성: 로그는 문제를 디버깅하는 데 필요한 최소한의 정보만 제공해야 한다.
• 형식화: 로그는 필요한 정보를 빠르게 찾을 수 있도록 잘 정리된 형식이어야 한다.
• 실행 가능성: 로그는 문제를 해결하고 다음 단계로 넘어갈 수 있도록 실행 가능해야 한다.

이러한 목표를 달성하기 위해 LogBox는 다음과 같은 기능을 포함한다:

• 로그 알림: 경고 알림을 재설계하고 에러를 지원하도록 개선했다. 이제 모든 console.warn과 console.log 메시지는 앱을 가리지 않고 알림으로 표시된다.
• 코드 프레임: 모든 에러와 경고 메시지에는 앱 내에서 로그의 소스 코드를 보여주는 코드 프레임이 포함된다. 이를 통해 문제의 원인을 빠르게 파악할 수 있다.
• 컴포넌트 스택: 모든 컴포넌트 스택은 이제 에러 메시지에서 분리되어 별도의 섹션에 표시되며, 상위 세 개의 프레임이 보인다. 이를 통해 로그 메시지를 어지럽히지 않고 스택 프레임 정보를 일관된 공간에서 확인할 수 있다.
• 스택 프레임 접기: 기본적으로 앱 코드와 관련 없는 호출 스택 프레임을 접어서 React Native 내부 코드를 뒤지는 대신 앱 내 문제를 빠르게 확인할 수 있다.
• 구문 에러 형식화: 구문 에러의 형식을 개선하고 구문 강조가 적용된 코드 프레임을 추가했다. 이를 통해 에러의 소스를 확인하고 수정한 후 React Native의 방해 없이 코딩을 계속할 수 있다.

이 모든 기능은 에러와 경고 간 일관된 디자인으로 통합되었으며, 모든 로그를 하나의 편리한 UI에서 페이징할 수 있도록 개선되었다.

이번 변경으로 YellowBox 대신 LogBox API를 사용한다:

• LogBox.ignoreLogs(): 이 함수는 YellowBox.ignoreLogs([])를 대체하며, 주어진 문자열이나 정규식과 일치하는 로그를 무시한다.
• LogBox.ignoreAllLogs(): 이 함수는 console.disableYellowBox를 대체하며, 에러나 경고 알림을 끌 수 있다. 단, 이는 알림만 비활성화하며, 처리되지 않은 에러는 여전히 전체 화면 LogBox를 열 것이다.

0.63 버전에서는 이러한 사용 중단된 모듈이나 메서드를 사용할 때 경고를 표시한다. 0.64 버전에서 이 API가 제거되기 전에 호출 부분을 업데이트해야 한다.

LogBox와 React Native 디버깅에 대한 자세한 내용은 문서를 참고한다.

Pressable​

React Native는 플랫폼의 사용자 기대치를 충족하는 애플리케이션을 만들 수 있도록 설계되었다. 이는 React Native로 개발되었다는 사실을 드러내는 작은 단서를 피하는 것을 포함한다. 이러한 단서의 주요 원인 중 하나는 Touchable 컴포넌트들이다: Button, TouchableWithoutFeedback, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, 그리고 TouchableBounce. 이 컴포넌트들은 사용자 상호작용에 시각적 피드백을 제공해 애플리케이션을 인터랙티브하게 만든다. 하지만 플랫폼의 상호작용과 일치하지 않는 내장 스타일과 효과를 포함하고 있어, 사용자가 React Native로 작성된 경험을 알아챌 수 있다.

또한 React Native가 성장하고 고품질 애플리케이션에 대한 기준이 높아짐에 따라, 이 컴포넌트들은 그에 맞춰 발전하지 못했다. React Native는 이제 Web, Desktop, TV와 같은 플랫폼을 지원하지만, 추가적인 입력 방식에 대한 지원은 부족했다. React Native는 모든 플랫폼에서 고품질 상호작용 경험을 지원해야 한다.

이러한 문제를 해결하기 위해, 새로운 코어 컴포넌트인 Pressable을 출시했다. 이 컴포넌트는 다양한 유형의 상호작용을 감지하는 데 사용할 수 있다. API는 상위 컴포넌트에서 수동으로 상태를 유지하지 않고도 상호작용의 현재 상태에 직접 접근할 수 있도록 설계되었다. 또한 플랫폼이 호버, 블러, 포커스 등의 기능을 확장할 수 있도록 설계되었다. 대부분의 사람들이 TouchableOpacity와 같은 기본 경험에 의존하기보다는 Pressable을 활용해 컴포넌트를 구축하고 공유할 것으로 기대한다.

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

<Pressable
  onPress={() => {
    console.log('pressed');
  }}
  style={({pressed}) => ({
    backgroundColor: pressed ? 'lightskyblue' : 'white',
  })}>
  <Text style={styles.text}>Press Me!</Text>
</Pressable>;

Pressable 컴포넌트의 간단한 예제

더 자세한 내용은 공식 문서에서 확인할 수 있다.

네이티브 색상 (PlatformColor, DynamicColorIOS)​

모든 네이티브 플랫폼은 시스템에서 정의한 색상 개념을 가지고 있다. 이 색상들은 라이트 모드나 다크 모드와 같은 시스템 테마 설정, 고대비 모드와 같은 접근성 설정, 그리고 포함된 뷰나 윈도우의 특성과 같은 앱 내부의 컨텍스트에 자동으로 반응한다.

Appearance API나 AccessibilityInfo를 통해 이러한 설정 중 일부를 감지하고 스타일을 조정할 수 있지만, 이러한 추상화는 개발 비용이 많이 들 뿐만 아니라 네이티브 색상의 외관을 근사치로만 흉내낸다. 이러한 불일치는 React Native 엘리먼트와 네이티브 엘리먼트가 공존하는 하이브리드 애플리케이션에서 특히 두드러진다.

React Native는 이제 이러한 시스템 색상을 바로 사용할 수 있는 기본 제공 솔루션을 제공한다. PlatformColor()는 React Native에서 다른 색상과 마찬가지로 사용할 수 있는 새로운 API다.

예를 들어, iOS에서는 시스템이 labelColor라는 색상을 제공한다. 이 색상을 React Native에서 PlatformColor를 사용해 다음과 같이 적용할 수 있다:

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

<Text style={{color: PlatformColor('labelColor')}}>
  This is a label
</Text>;

Text 컴포넌트의 색상을 iOS에서 정의한 labelColor로 설정한다.

반면 Android는 colorButtonNormal과 같은 색상을 제공한다. 이 색상을 React Native에서 다음과 같이 사용할 수 있다:

import {View, Text, PlatformColor} from 'react-native';

<View
  style={{
    backgroundColor: PlatformColor('?attr/colorButtonNormal'),
  }}>
  <Text>This is colored like a button!</Text>
</View>;

View 컴포넌트의 배경색을 Android에서 정의한 colorButtonNormal로 설정한다.

PlatformColor에 대해 더 자세히 알고 싶다면 공식 문서를 참고하라. 또한 RNTester에 있는 실제 코드 예제도 확인할 수 있다.

DynamicColorIOS는 iOS 전용 API로, 라이트 모드와 다크 모드에서 사용할 색상을 정의할 수 있다. PlatformColor와 마찬가지로, 이 API는 색상을 사용할 수 있는 모든 곳에서 사용할 수 있다. DynamicColorIOS는 내부적으로 iOS의 colorWithDynamicProvider를 사용한다.

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

const customDynamicTextColor = DynamicColorIOS({
  dark: 'lightskyblue',
  light: 'midnightblue',
});

<Text style={{color: customDynamicTextColor}}>
  This color changes automatically based on the system theme!
</Text>;

시스템 테마에 따라 텍스트 색상을 자동으로 변경한다.

DynamicColorIOS에 대해 더 자세히 알고 싶다면 공식 문서를 참고하라.

iOS 9 및 Node.js 8 지원 중단​

출시된 지 4년이 넘은 iOS 9에 대한 지원을 중단한다. 이 변경으로 특정 iOS 버전에서 기능을 지원하는지 확인하기 위해 네이티브 코드에 추가해야 하는 호환성 검사를 줄일 수 있다. 이는 개발 속도를 높이는 데 도움이 된다. iOS 9의 시장 점유율이 1%에 불과하므로, 고객에게 큰 부정적인 영향을 미치지 않을 것이다.

동시에 Node 8에 대한 지원도 중단한다. Node 8의 LTS 유지보수 주기는 2019년 12월에 종료됐다. 현재 LTS 버전은 Node 10이며, 이제 이 버전을 목표로 한다. React Native 애플리케이션 개발에 여전히 Node 8을 사용하고 있다면, 최신 보안 수정 사항과 업데이트를 받기 위해 업그레이드할 것을 권장한다.

기타 주요 개선 사항​

• <View />를 <Text /> 내에서 명시적 크기 없이 렌더링 지원: 이제 <Text /> 컴포넌트 안에 있는 <View />를 명시적으로 너비와 높이를 설정하지 않고도 렌더링할 수 있다. 이전 React Native 버전에서는 RedBox 오류가 발생했던 문제가 해결되었다.

• iOS 런치 스크린을 xib에서 storyboard로 변경: 2020년 4월 30일부터 App Store에 제출되는 모든 앱은 Xcode 스토리보드를 사용해 앱의 런치 스크린을 제공해야 하며, 모든 iPhone 앱은 모든 iPhone 화면을 지원해야 한다. 이번 커밋은 React Native 기본 템플릿을 이 요구사항에 맞게 조정한다.

감사의 말​

0.63 버전을 만드는 데 도움을 준 수백 명의 기여자들에게 감사드립니다!

LogBox 섹션을 작성한 Rick Hanlon과 이 글의 Pressable 부분을 작성한 Eli White에게 특별한 감사를 전합니다.

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

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

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

기본 제공되는 Flipper​

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

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 변경 로그를 참고하세요.

React Native 커뮤니티의 6명의 기여자가 20개 이상의 풀 리퀘스트를 통해 기여한 결과, 개발 환경 설정, 문제 해결, 그리고 오류 자동 수정을 도와주는 새로운 커맨드인 react-native doctor를 출시하게 되어 기쁘게 생각합니다. doctor 커맨드는 Expo와 Homebrew의 doctor 커맨드에서 영감을 받았으며, Jest의 UI에서도 영향을 받았습니다.

React Native 0.61을 발표하게 되어 기쁘게 생각합니다. 이번 버전에는 Fast Refresh라는 새로운 리로딩 기능이 포함되어 있습니다.

빠른 새로고침(Fast Refresh)​

리액트 네이티브 커뮤니티에 공통적인 문제점에 대해 물었을 때, 가장 많이 언급된 답변 중 하나는 "핫 리로딩" 기능이 제대로 작동하지 않는다는 것이었다. 이 기능은 함수형 컴포넌트에서 신뢰할 수 없었고, 화면 업데이트가 자주 실패했으며, 오타나 실수에 취약했다. 대부분의 사람들이 이 기능을 비활성화했다는 피드백을 받았다.

리액트 네이티브 0.61에서 기존의 "라이브 리로딩"(저장 시 재로딩)과 "핫 리로딩" 기능을 통합해 "빠른 새로고침(Fast Refresh)"라는 새로운 기능으로 재설계했다. 빠른 새로고침은 다음과 같은 원칙으로 처음부터 구현되었다:

• 빠른 새로고침은 함수형 컴포넌트와 훅을 포함한 모던 리액트를 완벽히 지원한다.
• 빠른 새로고침은 오타나 실수 후에도 원활히 복구하며, 필요한 경우 전체 재로딩으로 대체한다.
• 빠른 새로고침은 코드 변환을 과도하게 수행하지 않아 기본적으로 활성화해도 안정적이다.

빠른 새로고침이 작동하는 모습을 보려면 다음 비디오를 확인해 보자:

한번 사용해 보고 의견을 남겨 주세요! 원한다면 개발자 메뉴(iOS에서는 Cmd+D, 안드로이드에서는 Cmd+M 또는 Ctrl+M)에서 비활성화할 수 있다. 활성화와 비활성화는 즉시 적용되므로 언제든지 가능하다.

빠른 새로고침 사용 시 유용한 팁 몇 가지:

• 빠른 새로고침은 기본적으로 함수형 컴포넌트(와 훅!)의 로컬 상태를 유지한다.
• 매번 수정 시 리액트 상태를 초기화해야 한다면, 해당 컴포넌트 파일에 // @refresh reset 주석을 추가하면 된다.
• 빠른 새로고침은 클래스 컴포넌트를 상태를 유지하지 않고 항상 다시 마운트한다. 이는 안정적인 작동을 보장한다.
• 코드에서 실수를 할 때마다 빠른 새로고침은 파일 저장 후 자동으로 렌더링을 재시도한다. 구문 오류나 런타임 오류를 수정한 후 앱을 수동으로 재로딩할 필요가 없다.
• 수정 중 console.log나 debugger 문을 추가하는 것은 유용한 디버깅 기법이다.

빠른 새로고침 관련 문제가 있다면 GitHub에 보고해 주세요. 검토하겠습니다.

기타 개선 사항​

• use_frameworks! CocoaPods 지원 수정. 0.60 버전에서 CocoaPods를 기본적으로 통합하기 위해 몇 가지 업데이트를 진행했다. 하지만 이로 인해 use_frameworks!를 사용하는 빌드가 깨지는 문제가 발생했다. 이 문제는 0.61 버전에서 수정되어, 동적 프레임워크를 사용하는 iOS 프로젝트에 React Native를 더 쉽게 통합할 수 있게 됐다.

• useWindowDimensions Hook 추가. 이 새로운 Hook은 자동으로 화면 크기 업데이트를 제공하고 구독한다. 대부분의 경우 Dimensions API 대신 사용할 수 있다.

• React 16.9로 업그레이드. 이 버전에서는 UNSAFE_ 생명주기 메서드의 구식 이름을 더 이상 사용하지 않도록 변경했고, act 기능이 개선됐다. 자세한 내용과 자동 마이그레이션 스크립트는 React 16.9 블로그 포스트에서 확인할 수 있다.

주요 변경 사항​

• React .xcodeproj 제거. 0.60 버전에서 CocoaPods를 통한 자동 링크 기능을 도입했다. 또한 CocoaPods를 e2e 테스트 실행에 통합해, 이제부터는 iOS 앱에 RN을 통합하는 표준 방식으로 사용한다. 이로 인해 React .xcodeproj 지원이 사실상 중단되었으며, 0.61 버전부터 해당 파일이 제거되었다. 참고: 이미 0.60 버전의 자동 링크를 사용 중이라면 이 변경 사항의 영향을 받지 않는다.

감사 인사​

0.61 버전을 만드는 데 도움을 주신 모든 기여자분들께 감사드립니다!

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

지난주 Chain React 컨퍼런스에서 Facebook이 개발한 오픈소스 JavaScript 엔진인 Hermes를 공개했다. Hermes는 Android에서 React Native를 실행하기 위해 최적화된 작고 가벼운 JavaScript 엔진이다. 자세히 알아보기!

Hermes는 메모리 사용량을 줄이고, 다운로드 크기를 줄이며, 앱이 사용 가능해지는 시간 즉 "Time to Interactive"(TTI)를 단축함으로써 React Native의 성능을 향상시킨다.

"성능 데이터를 분석하면서 JavaScript 엔진 자체가 앱 시작 성능과 다운로드 크기에 큰 영향을 미친다는 사실을 발견했다. 이 데이터를 바탕으로 데스크톱이나 노트북보다 제약이 많은 모바일 환경에서 JavaScript 성능을 최적화해야 한다는 결론을 내렸다. 여러 옵션을 검토한 끝에 Hermes라는 새로운 JavaScript 엔진을 개발했다. Hermes는 메모리가 제한적이고 저장 장치가 느리며 컴퓨팅 성능이 낮은 대중 시장 기기에서도 React Native 앱의 성능을 개선하도록 설계되었다." —Hermes: React Native부터 시작하는 모바일 앱 최적화 오픈소스 JavaScript 엔진

바로 시작하고 싶은가? 기존 React Native 앱에서 Hermes를 활성화하는 새로운 가이드를 확인하자!

Rachel Nabors의 일러스트