React Native 0.71 버전 출시와 함께, TypeScript 사용 경험을 개선하기 위해 다음과 같은 변화가 도입되었다:
이 글에서는 TypeScript나 Flow 사용자에게 이러한 변화가 어떤 의미를 가지는지 설명한다.
오늘 우리는 React Native를 위한 실험적인 크로스 플랫폼 포인터 API를 공개한다. 이 API의 목적, 작동 방식, 그리고 React Native 사용자에게 어떤 이점을 제공하는지 살펴볼 것이다. 또한 이를 활성화하는 방법에 대한 지침도 제공하며, 여러분의 피드백을 기대한다!
우리가 다양한 플랫폼 비전을 공유한 지 1년이 넘었다. 이 비전은 모바일을 넘어 모든 플랫폼에서 더 높은 기준을 설정하는 것에 대해 다뤘다. 그동안 우리는 VR, 데스크톱, 웹을 위한 React Native에 대한 투자를 늘렸다. 이러한 플랫폼에서의 하드웨어와 상호작용의 차이로 인해, React Native가 입력을 어떻게 종합적으로 처리해야 하는지에 대한 질문이 제기되었다.
데스크톱과 VR은 역사적으로 마우스와 키보드 입력에 의존해 왔고, 모바일은 주로 터치를 사용해 왔다. 이제는 터치스크린 노트북과 모바일에서 키보드와 펜을 통한 상호작용을 지원해야 할 필요성이 커지면서 이 구도가 변화하고 있다. 그러나 React Native의 터치 이벤트 시스템은 이러한 요구를 처리할 수 없다.
이 때문에, out-of-tree 플랫폼 사용자들은 React Native를 포크하거나 커스텀 네이티브 컴포넌트와 모듈을 만들어 호버 감지나 왼쪽 클릭 같은 핵심 기능을 지원한다. 이러한 분기는 이벤트 핸들러가 비슷한 목적을 수행하지만 플랫폼마다 다른 프로퍼티를 사용하게 만들어 중복을 일으킨다. 이는 프레임워크의 복잡성을 증가시키고 플랫폼 간 코드 공유를 번거롭게 만든다. 이러한 이유로 팀은 크로스 플랫폼 포인터 API를 제공하려고 한다.
React Native는 다양한 플랫폼을 지원하면서도 각 플랫폼의 특성을 유지할 수 있는 견고하고 표현력 있는 API를 제공하는 것을 목표로 한다. 이러한 API를 설계하는 것은 어려운 과제지만, 다행히 React Native가 활용할 수 있는 포인터 관련 기존 사례가 있다.
웹은 다양한 플랫폼으로 확장 가능하면서도 미래를 고려한 설계를 필요로 하는 플랫폼이다. W3C(World Wide Web Consortium)는 서로 다른 플랫폼과 브라우저 간에 상호 운용 가능한 웹을 구축하기 위한 표준과 제안을 정하는 역할을 맡고 있다.
우리에게 가장 관련이 깊은 것은 W3C가 포인터라는 추상적인 입력 형태에 대한 동작을 정의한 것이다. Pointer Events 명세는 마우스 이벤트를 기반으로 하며, 크로스 디바이스 포인터 입력을 위한 단일 이벤트 및 인터페이스 세트를 제공하는 동시에 필요할 때 디바이스별 처리를 허용한다.
Pointer Events 명세를 따르면 React Native 사용자에게 많은 이점이 있다. 앞서 언급한 문제를 해결할 뿐만 아니라, 다중 입력 타입 상호작용을 고려할 필요가 없었던 플랫폼의 기능을 향상시킨다. 예를 들어, Android 폰에 블루투스 마우스를 연결하거나 iPad M2에서 Apple Pencil의 호버 기능을 지원하는 경우를 생각해 볼 수 있다.
명세를 준수하면 웹과 React Native 간의 지식 공유 기회도 제공한다. Pointer Events에 대한 웹 기대치를 교육하면 React Native 개발자에게도 도움이 된다. 하지만 React Native의 요구사항은 웹과 다르며, 우리의 명세 접근 방식은 최선을 다하되 잘 문서화된 차이점을 통해 기대치를 명확히 하는 것이다. 접근성 및 성능 API에서 API 분산을 줄이기 위해 특정 웹 표준을 맞추는 관련 작업도 진행 중이다.
Pointer Events 명세는 API의 인터페이스와 동작을 설명하지만, 우리가 명세를 검증 자료로 삼고 변경 사항을 확신하기에는 충분히 구체적이지 않았다. 하지만 웹 브라우저는 Web Platform Tests를 사용해 규정 준수와 상호 운용성을 보장한다.
Web Platform Tests는 브라우저의 명령형 DOM API를 대상으로 작성되었다. React Native는 자체 뷰 프리미티브를 사용하기 때문에 이를 지원하지 않는다. 따라서 브라우저와 테스트 코드를 공유할 수 없고, 대신 Web Platform Tests를 쉽게 포팅할 수 있는 React Native용 테스트 API를 만들었다.
우리는 RNTester를 통해 구현 사항을 검증하기 위해 새로운 수동 테스트 프레임워크를 구현했다. 이 테스트는 RNTester Platform Tests라는 이름으로 불리며, 아직 기본적인 수준이다. 이 구현은 테스트 케이스를 컴포넌트 자체로 구성할 수 있는 API를 제공하며, 테스트 결과는 UI를 통해 보고된다.
이 테스트는 Pointer Events 구현의 완성도를 높이는 데 계속 유용할 것이다. 또한 Android와 iOS 이외의 플랫폼에서도 Pointer Events 구현을 테스트할 수 있도록 확장될 것이다. 테스트 스위트의 수가 증가함에 따라, 우리는 이 테스트의 실행을 자동화하여 구현에서의 회귀를 더 잘 포착할 수 있도록 할 계획이다.
Pointer Events 구현의 상당 부분은 기존 터치 이벤트 전달 인프라를 기반으로 한다. Android와 iOS에서는 각각 MotionEvent와 UITouch 이벤트를 활용한다. 이벤트 전달의 일반적인 흐름은 아래 다이어그램에 나와 있다.
Android를 예로 들면, 플랫폼 이벤트를 활용하는 일반적인 접근 방식은 다음과 같다:
MotionEvent의 모든 포인터를 순회하며 각 포인터의 대상 React 뷰와 그 조상 경로를 결정하기 위해 깊이 우선 탐색을 수행한다.MotionEvent의 카테고리를 관련 Pointer Events로 매핑한다. MotionEvent와 PointerEvent 사이에는 1대다 관계가 있다. 이 관계를 나타낸 다이어그램에서 점선은 포인팅 장치가 호버를 지원하지 않을 때 발생하는 이벤트를 나타낸다.
MotionEvent의 플랫폼 세부 정보와 이전 상호작용의 캐시된 상태를 사용해 PointerEvent 인터페이스를 구성한다. (예: button 속성)react-native-renderer의 dispatchEvent 메서드를 호출한다. 이 메서드는 이벤트의 버블링 및 캡처 단계를 위해 React 트리를 순회한다.현재 Pointer Events 명세 구현 진행 상황을 살펴보면, 가장 일반적인 이벤트인 누르기, 호버링, 이동 등을 처리하는 견고한 기반 구현에 초점을 맞추고 있다.
| 구현 완료 | 구현 중 | 아직 구현되지 않음 |
|---|---|---|
| onPointerOver | onPointerCancel | onClick |
| onPointerEnter | onContextMenu | |
| onPointerDown | onGotPointerCapture | |
| onPointerMove | onLostPointerCapture | |
| onPointerUp | onPointerRawUpdate | |
| onPointerOut | ||
| onPointerLeave |
onPointerCancel은 네이티브 플랫폼의 "cancel" 이벤트에 연결되어 있지만, 이는 웹 플랫폼에서 예상하는 시점과 항상 일치하지는 않는다.
위에서 언급한 각 이벤트에 대해, React Native는 event.nativeEvent 속성을 통해 PointerEvent 객체에서 기대되는 대부분의 속성을 구현했다. 구현된 모든 속성 목록은 이벤트 객체의 Flowtype 인터페이스 정의에서 확인할 수 있다. 완전히 구현되지 않은 주목할 만한 예외는 relatedTarget 속성이다. 이 속성을 임시 방식으로 네이티브 뷰 참조로 노출하는 것은 간단하지 않다.
위에서 언급한 이벤트 외에도 Pointer Events와 관련된 몇 가지 API가 더 있다. 앞으로 이 프로젝트의 일환으로 이러한 API를 구현할 계획이다. 이 API들은 다음과 같다:
setPointerCapture(), releasePointerCapture(), hasPointerCapture()와 같은 엘리먼트 참조에 노출된 명령형 API를 포함한다.touch-action 스타일 속성
click, contextmenu, auxclick
click은 접근성 패러다임이나 다른 플랫폼 특성 상호작용을 통해 트리거될 수 있는 상호작용의 추상적 정의다.네이티브 Pointer Events 구현의 또 다른 장점은 현재 터치 이벤트에만 제한되고 Responder, Pressability, PanResponder API에 의해 자바스크립트에서 처리되는 다양한 형태의 제스처 처리를 재검토하고 개선할 수 있다는 점이다.
또한 React Native 호스트 컴포넌트(즉, add/removeEventListener)에 대한 EventTarget 인터페이스 구현을 포함하는 방안을 계속 탐구하고 있다. 이를 통해 포인터 상호작용을 처리하는 더 많은 사용자 정의 추상화가 가능해질 것으로 기대한다.
포인터 이벤트 구현은 아직 실험 단계지만, 커뮤니티의 피드백을 적극적으로 받고자 한다. 이 API를 직접 사용해보고 싶다면 몇 가지 기능 플래그를 활성화해야 한다:
포인터 이벤트는 새로운 아키텍처(Fabric)에서만 구현되었으며, 이 글을 작성하는 시점에서 출시 후보인 React Native 0.71+ 버전에서만 사용할 수 있다.
여러분의 자바스크립트 진입 파일(기본 React Native 앱 템플릿의 index.js)에서 포인터 이벤트를 사용하려면 shouldEmitW3CPointerEvents 플래그를 활성화해야 한다. 또한 Pressability에서 포인터 이벤트를 사용하려면 shouldPressibilityUseW3CPointerEventsForHover 플래그도 활성화해야 한다.
import ReactNativeFeatureFlags from 'react-native/Libraries/ReactNative/ReactNativeFeatureFlags';
// W3C 포인터 이벤트 구현의 자바스크립트 측면 활성화
ReactNativeFeatureFlags.shouldEmitW3CPointerEvents = () => true;
// Pressability의 호버 이벤트를 포인터 이벤트 구현으로 지원
ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover =
() => true;
네이티브 iOS 렌더러에서 포인터 이벤트가 전송되도록 하려면, 네이티브 앱의 초기화 코드(일반적으로 AppDelegate.mm)에서 네이티브 기능 플래그를 활성화해야 한다.
#import <React/RCTConstants.h>
// ...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
RCTSetDispatchW3CPointerEvents(YES);
// ...
}
iOS에서 Pointer Event 구현이 마우스와 터치 포인터를 구분할 수 있도록 하려면, Xcode 프로젝트의 info.plist에 UIApplicationSupportsIndirectInputEvents를 추가해야 한다.
iOS와 마찬가지로 안드로이드도 앱 초기화 시 기능 플래그를 활성화해야 한다. 일반적으로 루트 React 액티비티나 화면의 onCreate 메서드에서 설정한다.
import com.facebook.react.config.ReactFeatureFlags;
//... 초기화 코드 어딘가에
@Override
public void onCreate() {
ReactFeatureFlags.dispatchPointerEvents = true;
}
function onPointerOver(event) {
console.log(
'파란 박스 위에서의 오프셋: ',
event.nativeEvent.offsetX,
event.nativeEvent.offsetY,
);
}
// ... 어떤 컴포넌트 내부
<View
onPointerOver={onPointerOver}
style={{height: 100, width: 100, backgroundColor: 'blue'}}
/>;
현재 Pointer Events는 VR 플랫폼과 Oculus 스토어에서 사용되고 있다. 우리는 지금까지의 접근 방식과 구현 내용에 대한 초기 커뮤니티 피드백을 기대하고 있다. 앞으로의 진행 상황을 여러분과 공유하게 되어 기쁘다. 이 작업에 대한 질문이나 의견이 있다면, Pointer Events에 대한 전용 토론에 참여해 주길 바란다.
몇 년간의 팬데믹과 온라인 전용 이벤트를 겪은 후, 이제는 React Native의 핵심 기여자들을 한자리에 모을 때라고 생각했다.
그래서 9월 초, 우리는 React Native의 주요 기여자들, 라이브러리 관리자들, 그리고 Meta의 React Native 및 Metro 팀을 Core Contributor Summit 2022에 초대했다. Callstack이 폴란드 브로츠와프 본사에서 이번 서밋을 주최했으며, 동시에 진행된 React Native EU 컨퍼런스의 일부로 진행되었다.
React Native 코어 팀과 함께 참가자들이 참여할 수 있는 여러 워크숍을 기획했다. 주제는 다음과 같았다:
이틀 동안 진행된 지식 공유와 협업의 규모에 깊은 인상을 받았다. 이번 블로그 포스트에서는 이번 모임의 결과물을 미리 살펴볼 수 있도록 하겠다.
React Native의 새로운 버전인 0.70.0을 발표하게 되어 기쁘게 생각한다. 이번 버전에서는 Codegen을 위한 새로운 통합 설정, 기본 엔진으로 Hermes 도입, Android 빌드를 위한 완전한 CMake 지원, 그리고 새로운 아키텍처를 위한 문서 업데이트 등 여러 가지 개선 사항이 포함되었다. 자세한 내용을 계속해서 확인해 보자!
지난 10월, 우리는 모든 React Native 앱에서 Hermes를 기본 엔진으로 설정하기 위한 작업을 시작했다고 발표했다.
Hermes는 Meta 내부에서 React Native에 많은 가치를 제공해 왔으며, 오픈소스 커뮤니티도 이로부터 혜택을 받을 것이라고 믿는다. Hermes는 리소스가 제한된 장치를 위해 설계되었으며, 앱 시작 시간, 앱 크기, 메모리 소비를 최적화한다. Hermes와 다른 JS 엔진의 주요 차이점은 JavaScript 소스 코드를 사전에 바이트코드로 컴파일할 수 있다는 점이다. 이 사전 컴파일된 바이트코드는 바이너리 내부에 번들로 포함되며, 앱 시작 시 이 비용이 많이 드는 단계를 수행하지 않아도 된다.
발표 이후, Hermes를 더욱 개선하기 위해 많은 작업이 진행되었고, 오늘 우리는 React Native 0.70이 Hermes를 기본 엔진으로 제공하게 될 것임을 발표하게 되어 기쁘게 생각한다. 이는 v0.70부터 시작하는 모든 새 프로젝트에서 Hermes가 기본적으로 활성화됨을 의미한다. 7월에 출시될 이 롤아웃을 앞두고, 우리는 커뮤니티와 긴밀히 협력하여 전환이 원활하게 이루어지고 모든 사용자에게 가치를 제공할 수 있도록 하려 한다. 이 블로그 포스트에서는 이 변화로부터 기대할 수 있는 사항, 성능 벤치마크, 새로운 기능 등을 다룰 것이다. React Native 0.70을 기다리지 않고도 Hermes를 사용할 수 있다는 점을 기억하라. 이 가이드를 따라 기존 React Native 앱에서 Hermes를 활성화할 수 있다.
Hermes가 새 React Native 프로젝트에서 기본적으로 활성화되지만, 다른 엔진에 대한 지원은 계속될 것이다.
React Native의 새로운 버전인 0.69.0을 발표하게 되어 기쁘게 생각한다. 이번 버전에는 React Native의 새로운 아키텍처를 위한 여러 개선 사항과 새로운 기능들이 포함되어 있다. 주요 내용으로는 React 18 지원과 번들링된 Hermes가 있다. 더 자세한 내용을 확인해 보자!
요약: React Native의 새로운 아키텍처를 지원하기 위한 리소스를 개선 중이다. 앱 마이그레이션을 돕는 저장소(RNNewArchitectureApp)와 라이브러리를 위한 저장소(RNNewArchitectureLibraries)를 이미 공개했다. 또한 웹사이트의 새로운 아키텍처 가이드를 개편 중이며, 새로운 아키텍처 관련 질문에 답변하기 위해 GitHub 워킹 그룹을 만들었다.
이번 글에서는 여러분의 네이티브 모듈과 네이티브 컴포넌트를 새 아키텍처에 해당하는 TurboModule과 Fabric 컴포넌트로 마이그레이션하는 데 도움이 되는 도구와 리소스에 대한 업데이트를 공유한다.
React Native 사용자는 앱을 구축하기 위해 다양한 오픈소스 라이브러리를 활용한다. 완전하고 일관된 생태계를 위해 이러한 라이브러리가 마이그레이션되어야 한다. 이를 통해 모든 사람이 새 아키텍처의 잠금 해제된 기능과 성능 개선을 누릴 수 있다.
라이브러리 개발자들이 새 아키텍처로 마이그레이션하는 것을 지원하기 위해 다음과 같은 작업을 진행 중이다:
이 글에서는 이러한 리소스를 더 깊이 파고들어 어떻게 가장 효율적으로 사용할 수 있는지 자세히 설명한다. 마지막으로 가장 많이 사용되는 React Native 라이브러리의 현재 마이그레이션 상태를 간략히 소개한다.
지난 6개월 동안, 우리는 새로운 아키텍처 도입 가이드와 Fabric에 대한 아키텍처 심층 분석을 추가했다. 앞으로 TurboModules 생성, CodeGen 이해 등에 관한 더 많은 가이드와 문서를 포함하도록 확장할 계획이다. 0.70 버전 출시 전까지 업데이트를 공유할 예정이다.
현재 새로운 아키텍처 가이드는 앱 마이그레이션과 라이브러리 마이그레이션을 통해 새로운 아키텍처를 지원하는 방법을 다룬다.
이 가이드의 발전 과정에 관심이 있거나 피드백을 제공하고 싶다면, 이 풀 리퀘스트를 통해 확인할 수 있다.
코드로 직접 따라가며 실습하고 싶은 개발자를 위해 두 가지 예제 저장소를 준비했다.
이 저장소는 React Native 버전 0.67의 레거시 아키텍처에서 새로운 아키텍처와 최신 React Native 버전으로 앱, 네이티브 모듈, 네이티브 컴포넌트를 마이그레이션하는 방법을 보여주기 위해 만들어졌다. 각 커밋은 독립적인 마이그레이션 단계에 해당한다.
이 저장소는 다음과 같이 구성되어 있다:
일부 마이그레이션 브랜치에는 RUN.md 파일이 포함되어 있다. 이 파일은 각 커밋에서 적용된 정확한 단계를 더 읽기 쉬운 형태로 설명한다.
이 예제를 최신 안정 버전과 동기화하여 React Native의 각 마이너 릴리스에 대한 마이그레이션을 추가할 계획이다. 단계 중 문제가 발견되면 저장소에 이슈를 등록해 주길 바란다. 이 작업은 대부분의 React Native 사용자가 새로운 아키텍처로 마이그레이션했다고 판단될 때까지 계속될 것이다.
마찬가지로, 이 저장소는 TurboModule과 Fabric 컴포넌트를 만드는 방법을 단계별로 안내한다. 이 저장소는 새로운 아키텍처와 기존 아키텍처 간의 하위 호환성을 보장하는 데 중점을 둔다.
이 저장소는 이전 저장소와 유사한 방식으로 구성되어 있다:
이 예제는 React Native의 새로운 릴리스, 특히 라이브러리 개발에 영향을 미치는 릴리스에 맞춰 업데이트할 계획이다. 또한 고급 기능(예: 커맨드 구현, 이벤트 에미터, 커스텀 상태 사용)을 활용하는 방법에 대한 예제를 추가할 예정이다. 오류를 발견하면 예제 저장소에 이슈를 제출해 주기 바란다.
커뮤니티가 새로운 아키텍처에 대해 질문하고 업데이트를 받을 수 있도록 전용 워킹 그룹을 만들었다. 라이브러리 관리자라면 이곳에서 질문에 대한 답변을 찾고, 요구 사항을 공유할 수 있는 유용한 리소스다. 참여하려면 이 가이드를 따라주면 된다. 누구나 환영한다.
워킹 그룹은 다음과 같은 섹션으로 구성되어 있다:
이 그룹을 효과적으로 활용하려면:
이 그룹은 새로운 아키텍처가 기본으로 활성화되고 주요 라이브러리들이 모두 마이그레이션될 때까지 지원할 계획이다.
라이브러리 관리자들이 워킹 그룹에서 마이그레이션 진행 상황을 공유하고 있다. 이를 간략히 정리하면 다음과 같다:
React Native 커뮤니티가 새로운 아키텍처를 채택할 수 있도록 적극적으로 지원할 예정이다. 구체적으로 다음과 같은 계획을 진행한다:
또한 React Native 0.69 버전은 새로운 아키텍처 채택을 위한 앱 및 라이브러리 개발자의 개발 경험을 개선할 예정이다. 0.69.0 릴리스에 대한 자세한 정보는 여기에서 확인할 수 있다.
새로운 아키텍처와 함께 만들어갈 미래가 기대된다!
2022년 5월 19일은 글로벌 접근성 인식의 날(Global Accessibility Awareness Day) 11주년을 기념하는 날이다. 이번 기회에 React Native 프레임워크의 접근성 개선 사항을 공유하고자 한다. Meta(이전의 Facebook)는 2020년 GAAD 서약에 첫 번째로 참여한 조직으로, React Native 프레임워크의 접근성을 개선하겠다는 약속을 했다.
"이 서약이 React Native를 사용하는 개발자들이 완전히 접근 가능한 모바일 앱을 만들 수 있도록 돕고, 다른 조직들도 더 나은 접근성을 위한 유사한 약속을 하도록 영감을 주길 바란다."
이 프로세스는 React Native 프레임워크의 철저한 검토와 격차 분석으로 시작되었다. iOS와 Android API를 활용해 접근성 기능을 지원하는 데 초점을 맞췄다. 이후 수십 개의 이슈가 해결되거나 종료되며, React Native의 접근성을 개선하겠다는 약속을 이행하고 프레임워크의 접근성을 지속적으로 발전시켰다.
여기서 멈추지 않고, 2022년 초에는 React Native 접근성 개선 보드에서 남은 이슈들을 검토하고 개발자와 최종 사용자에게 미치는 영향을 기준으로 우선순위를 정했다.
2021년과 2022년 동안 React Native에 여러 고품질 접근성 개선 사항을 기여한 Fabrizo Bertoglio에게 감사의 말을 전하고자 한다.
Fabrizio는 고품질 솔루션을 통해 사용자들이 더 나은 경험을 할 수 있도록 하는 것을 개인적인 목표로 삼고 있다. 직접 TalkBack과 VoiceOver를 사용해 보면서 스크린 리더 사용자가 일상적인 애플리케이션을 사용하는 것이 얼마나 어려운지 깨달았다. 그는 이러한 경험에서 발생하는 문제를 해결하고 장애인 사용자들이 더 편리하게 소프트웨어를 사용할 수 있도록 하는 데 집중하고 있다.
그의 풀 리퀘스트는 매우 높은 품질을 자랑하며, 문서화가 잘 되어 있고 철저한 테스트 케이스를 포함하고 있다. 잘 했어, Fabrizio! React Native 접근성 커뮤니티는 그의 뛰어난 기여에 대해 깊은 감사를 표한다.
2022년에는 남아 있는 접근성 문제를 최대한 해결하는 것을 목표로 한다. 또한 React Native 커뮤니티에서 보고된 이슈를 검토하여 새로운 접근성 관련 요청 사항을 찾아볼 계획이다.
안녕하세요, 여러분! 오늘 우리는 React Native 0.68.0 버전을 발표합니다. 이번 릴리스에는 새로운 React Native 아키텍처의 옵트인(opt-in), 버그 수정 등이 포함되어 있습니다.
안녕하세요, 여러분. 이전에 발표한 내용대로,
2022년은 오픈소스에서 새로운 아키텍처의 해가 될 것입니다.
아직 새로운 React Native 아키텍처(Fabric 렌더러와 TurboModule 시스템)를 살펴보지 못했다면, 지금이 가장 좋은 시기입니다!
우리는 이 여정에 모두가 참여할 수 있도록 준비한 몇 가지 계획과 자료를 커뮤니티와 공유하고자 합니다.