리액트네이티브 새로운 아키텍쳐
2018년에 가시화된 리액트네이티브의 새로운 아키텍쳐가 2022년 3월에 발표되었습니다.
React Native의 새로운 아키텍처는 2018년에 리액트 네이티브 팀의 Lorenzo Sciandra에 의해 ‘Fabric’이라는 코드 이름으로 발표되었습니다.
기존 아키텍처의 문제점
기존 아키텍처는 JS 계층에서 네이티브 계층으로 전달해야 하는 모든 데이터를 ‘Bridge’라는 컴포넌트를 사용해 직렬화하여 작동하였습니다. Bridge는 생산 계층이 소비 계층에 데이터를 보내는 버스처럼 상상할 수 있습니다. 소비 계층은 데이터를 읽고, 역직렬화하여 필요한 작업을 수행합니다.
Bridge에는 몇 가지 본질적인 한계가 있었습니다.
- 비동기
한 계층이 Bridge로 데이터를 제출하고 다른 계층이 이를 처리하기를 비동기적으로 “대기”하였습니다. 이는 실제로 필요하지 않았던 경우에도 마찬가지였습니다. - 단일 스레드
JS는 단일 스레드에서 작동하므로, 그 세계에서 발생하는 모든 계산이 해당 단일 스레드에서 수행되어야 했습니다. - 부가적인 오버헤드 발생
한 계층이 다른 계층을 사용해야 할 때마다 일부 데이터를 직렬화해야 했습니다. 또 다른 계층은 이를 역직렬화해야 했습니다. 선택된 형식은 JSON이었는데, 그 이유는 간단하고 사람이 읽기 쉬워서였습니다. 하지만 가벼운 형식이라고 하더라도 비용이 듭니다.
새로운 아키텍처는 ‘Bridge’라는 개념을 버리고 JavaScript Interface (JSI)라는 다른 통신 메커니즘이 도입되었습니다. JSI는 JavaScript 객체가 C++의 참조를 보유하거나 그 반대가 가능한 인터페이스입니다.
이미지 출처: https://www.linkedin.com/pulse/react-native-new-architecture-what-changes-brings-react-poland
객체가 다른 객체의 참조를 보유하면, 그 객체의 메서드를 직접 호출할 수 있습니다. 따라서 예를 들면, C++ 객체는 이제 JavaScript 객체에 JavaScript 세계에서 메서드를 실행하도록 요청할 수 있습니다.
이 개념은 여러 가지 이점을 제공하게 되었습니다
- 동기식 실행 (Synchronous Execution)
원래 비동기적이지 않아야 하는 함수들을 이제 동기적으로 실행할 수 있게 되었습니다. - 동시성 (Concurrency)
JavaScript에서 다른 스레드에서 실행되는 함수를 호출할 수 있게 되었습니다. - 더 낮은 오버헤드
새로운 아키텍처는 더 이상 데이터를 직렬화/역직렬화하지 않아도 되므로, 직렬화에 대한 비용이 없습니다. - 코드 공유
C++를 도입함으로써, 모든 플랫폼 공통 코드를 추상화하고, 플랫폼 간에 쉽게 공유할 수 있게 되었습니다. - 타입 안전성
JS가 C++ 객체에서 메서드를 적절히 호출하고 그 반대가 되도록 하기 위해, 코드가 자동으로 생성되는 계층이 추가되었습니다. 이 코드는 Flow 또는 TypeScript를 통해 타입이 지정된 일부 JS 사양에서 시작하여 생성됩니다. 이러한 이점들은 새로운 네이티브 모듈 시스템의 기반이며, 더 나아가 더 빠르고 성능이 뛰어난 네이티브 컴포넌트를 제공하는 새로운 렌더러를 개발할 수 있게 하는 기반을 제공합니다.
앞서 언급한 바와 같이, 페이스북에서 2018년에 발표한 React Native의 새로운 아키텍처는 성능 향상과 개발자 경험을 개선하기 위한 프로젝트입니다. 이 새로운 아키텍처는 다음 세 가지 주요 변화를 중심으로 설계되었습니다.
첫째, Turbo Modules로 불리는 새로운 네이티브 모듈 시스템은 효율적이고 유연한 네이티브 코드와의 통합을 지원하는 프레임워크입니다. 둘째, Fabric이라는 새로운 네이티브 렌더러는 개선된 능력, 플랫폼 간 일관성, 그리고 렌더링 성능을 제공합니다. 셋째, Codegen은 JavaScript에서 정적 타이핑을 통해 새로운 아키텍처에 필요한 보일러플레이트 C++를 생성하는 도구입니다. 이들 변화를 통해 새로운 아키텍처는 애플리케이션의 성능을 향상시키고 개발자 경험을 더욱 간편하게 만들기 위해 설계되었습니다.
1. Turbo Modules
TurboModules는 React Native의 새로운 아키텍처 요소로서, JavaScript에서 네이티브 모듈을 직접, 동기적으로 호출하는 방식을 도입했습니다. 이전에는 JavaScript 코드에서 네이티브 모듈을 호출하는 것이 주로 비동기적으로 처리되었기 때문에, 호출 과정에서 시간 지연이 발생하거나, 복잡한 처리가 필요했습니다. 위 그림에서 보시다시피 비동기로 처리 되는 이유는 codegen이 아닌 자바스크립트 스레드에서만 UI와 통신할 수 있었기 때문입니다.
TurboModules의 등장으로 이러한 문제점을 해결할 수 있게 되었습니다. JavaScript에서 직접 네이티브 모듈을 동기적으로 호출할 수 있게 되면서, 이러한 호출 과정이 단순화되고, 호출 시간도 단축되어 애플리케이션의 전반적인 성능이 향상되었습니다.
TurboModules를 통해 가능해진 동기적 호출은 네이티브 코드와 JavaScript 코드 간의 통신이 보다 직접적이고 효율적이게 만들었습니다. 이로 인해 개발자는 더 적은 양의 코드로 동일한 작업을 수행할 수 있게 되었고, 이는 개발 과정을 간소화하고 코드의 가독성을 향상시키는 데에 기여하였습니다.
2. Fabric
Fabric은 React Native의 새로운 UI 렌더링 아키텍처로, JavaScript에서 네이티브 코드를 직접, 동기적으로 호출할 수 있습니다. 이는 JavaScript Interface(JSI)를 통해 가능하게 되었습니다.
Fabric의 목표는 UI 렌더링을 빠르고 예측 가능하게 만드는 것입니다. 이를 통해 애플리케이션의 반응성이 향상되며, 사용자 액션에 대한 반응도 신속하게 처리될 수 있습니다.
더욱이, Fabric은 터치 이벤트를 보다 정확하게 처리할 수 있도록 도와줍니다. JSI를 통한 직접적인 상호작용으로 인해 스크롤, 제스처 인식, 애니메이션 등의 터치 기반 인터랙션에 대한 반응성과 정확성이 향상되었습니다.
결론적으로, Fabric은 더 나은 사용자 경험과 향상된 성능을 위한 핵심 구성요소로서, React Native 애플리케이션 개발의 새로운 방향을 제시합니다.
3. Codegen
Codegen은 JavaScript에서 정적 타이핑을 이용해 React Native의 새로운 아키텍처에 필요한 보일러플레이트 C++ 코드를 자동으로 생성하는 도구입니다.
React Native에서 네이티브 코드와 JavaScript 코드 사이의 통신은 유형 안정성이 중요합니다. 유형 오류는 종종 실행 시간 오류로 이어지며, 이러한 오류를 디버깅하는 것은 복잡할 수 있습니다. Codegen은 이 문제를 해결하기 위해 개발되었습니다.
Codegen은 JavaScript 코드에 있는 유형 정보를 사용하여 이러한 유형 오류를 예방합니다. 이는 JavaScript에서 정적 타이핑을 지원하는 도구, 예를 들어 TypeScript나 Flow를 사용할 때 특히 유용합니다.
Codegen은 이 유형 정보를 이용하여 네이티브 코드와 JavaScript 코드 사이의 인터페이스에 대한 C++ 코드를 생성합니다. 이로 인해 개발자는 네이티브 코드와 JavaScript 코드 사이의 통신을 위한 코드를 수동으로 작성할 필요가 없어지므로, 개발 과정이 단순화되고 오류 발생 가능성이 줄어듭니다.
결과적으로, Codegen은 React Native의 새로운 아키텍처의 핵심 부분으로, 네이티브 코드와 JavaScript 코드 간의 효율적이고 안정적인 통신을 지원합니다.
