React Native는 iOS와 Android의 네이티브 앱을 JavaScript와 React를 기반으로 구축할 수 있는 강력한 프레임워크입니다.
특히, 웹 개발에서 사용하는 HTML과 유사한 JSX 문법을 활용해 네이티브 UI 컴포넌트를 구성하며, JavaScript 로직은 별도의 스레드에서 처리하여 성능을 높입니다.
1. 주요 UI 컴포넌트: <View> 와 <Text>
React Native에서는 HTML 요소인 <div> 나 <span> 대신,
네이티브 플랫폼 전용 컴포넌트인 <View>와 <Text>를 제공합니다.
이러한 컴포넌트는 React Native가 자동으로 네이티브 코드로 변환하여, iOS와 Android의 UI 요소로 렌더링됩니다.
• <View>: 레이아웃 및 UI 구조를 구성하는 컴포넌트로, HTML의 <div>와 유사하지만 네이티브 환경에 맞게 최적화되어 렌더링됩니다.
• <Text>: 텍스트 표시를 위한 컴포넌트로, HTML의 <span>이나 <p>와 유사한 역할을 합니다. 네이티브 플랫폼에서 텍스트 렌더링이 최적화됩니다.이처럼 React Native는 네이티브 환경에 최적화된 UI 컴포넌트를 사용하여 네이티브 수준의 사용자 경험을 제공합니다.
2. JavaScript 로직의 처리 방식: 네이티브와의 상호작용
React Native는 UI 렌더링과 JavaScript 로직을 분리하여 성능을 극대화합니다.
UI 요소는 네이티브 코드로 컴파일되지만, 상태 관리, 조건문 등 JavaScript로 작성된 로직은 네이티브 앱 내에서 JavaScript 스레드에서 실행됩니다.
이는 React Native가 네이티브 플랫폼과 상호작용하는 효율적인 방식을 제공합니다.
JavaScript 스레드의 역할
JavaScript 스레드는 React Native 앱 내에서 상태 관리 및 로직 처리 등을 담당합니다.
이 스레드 덕분에 JavaScript 로직은 네이티브 플랫폼에 직접 접근하지 않더라도, 네이티브 앱의 일부로서 필요한 작업을 수행할 수 있습니다.
네이티브 브리지 구조
React Native는 JavaScript와 네이티브 코드(iOS의 Swift, Android의 Kotlin 등) 사이의 소통을 위해 “브리지” 구조를 사용합니다.
이 구조는 두 환경 간의 데이터 전송을 가능하게 하여, JavaScript와 네이티브 모듈이 필요한 기능을 서로 호출할 수 있게 합니다.
- JavaScript에서 네이티브 모듈 호출: JavaScript 로직이 네이티브 기능을 요청할 때, 이 브리지를 통해 네이티브 모듈에 호출을 보냅니다.
- 네이티브 모듈에서 JavaScript로 데이터 반환: 네이티브 모듈이 요청에 응답하면, 브리지를 통해 JavaScript 스레드로 데이터를 반환합니다.
이 브리지 구조는 React Native가 다양한 네이티브 기능을 활용하면서도, JavaScript로 작성된 코드가 네이티브 기능과 상호작용할 수 있도록 지원하는 핵심입니다.
3. React Native의 아키텍처와 성능 최적화
React Native의 아키텍처는 JavaScript로 개발된 로직과 네이티브 UI의 효율적인 구분에 기반을 두고 있어, 애플리케이션의 성능을 유지하면서도 재사용성과 개발 속도를 높입니다.
그러나 브리지를 통해 JavaScript와 네이티브 간 통신이 잦아지면 성능 저하가 발생할 수 있어, 성능 최적화를 위해 네이티브 모듈을 적절히 활용하는 것이 중요합니다.
React Native는 JavaScript의 유연성과 네이티브 성능을 조화롭게 활용하여, 웹 개발자도 네이티브 앱을 효율적으로 개발할 수 있는 강력한 도구입니다.
