React Native) React Native란 무엇인가?

 

 

React Native란?

• 네이티브 앱 개발을 위한 JavaScript 프레임워크: React Native는 Facebook에서 만든 오픈소스 프레임워크로, JavaScript와 React의 개발 방식으로 iOS 및 Android용 네이티브 모바일 애플리케이션을 만들 수 있게 해줍니다.
• "Learn once, write anywhere": React의 철학을 따릅니다. 하나의 코드베이스로 여러 플랫폼(iOS, Android)에서 동작하는 앱을 만들 수 있지만, 때로는 플랫폼별 특화된 코드가 필요할 수 있습니다. (완전히 "Write once, run anywhere"는 아닐 수 있습니다.)
• WebView 기반이 아님: React Native는 웹뷰(WebView)를 사용하여 웹 기술을 단순히 감싸는 방식(하이브리드 앱의 한 종류)이 아닙니다. JavaScript 코드가 실제 네이티브 UI 컴포넌트(iOS의 UIKit, Android의 Native UI 요소)로 렌더링됩니다. 이로 인해 웹뷰 기반 앱보다 성능이 우수하고 네이티브 앱과 유사한 사용자 경험을 제공합니다.
• 브릿지(Bridge): JavaScript 코드와 네이티브 코드(Java/Kotlin for Android, Objective-C/Swift for iOS) 간의 통신을 담당하는 '브릿지'라는 개념이 존재합니다. 이 브릿지를 통해 JavaScript에서 네이티브 API(카메라, GPS 등)를 호출하거나 네이티브 UI 요소를 제어할 수 있습니다.

 

웹뷰(WebView)란?

• 앱 안의 작은 웹 브라우저 창: 웹뷰는 모바일 앱 내부에 탑재할 수 있는 일종의 "미니 웹 브라우저"라고 생각하시면 쉽습니다. 네이티브 앱(iOS나 Android 앱)의 한 부분에 웹 콘텐츠(HTML, CSS, JavaScript로 만들어진 웹 페이지)를 표시할 수 있도록 해주는 컴포넌트(부품)입니다.
• 운영체제(OS) 제공 기능: iOS에서는 WKWebView라는 이름으로, Android에서는 WebView라는 이름으로 각 운영체제가 이 기능을 제공합니다.
• 역할: 앱 개발자가 자신의 앱 화면 일부에 웹 페이지를 그대로 가져와 보여주고 싶을 때 사용합니다. 예를 들어, 앱 내 공지사항, 도움말 페이지, 이벤트 페이지 등을 웹사이트와 동일한 내용으로 보여주고 싶을 때 유용합니다.

 

React Native가 "WebView 기반이 아니다"라는 말의 의미

1. 전통적인 하이브리드 앱 (WebView 중심 앱):
   • 과거의 많은 "하이브리드 앱"들은 앱의 거의 모든 화면을 웹뷰로 만들었습니다. 즉, 앱의 껍데기(Native Shell)만 있고, 그 안의 내용은 전부 웹 페이지로 채워 넣는 방식입니다.
   • 장점: 하나의 웹 기술(HTML, CSS, JS)로 iOS와 Android 앱을 동시에 만들 수 있고, 기존 웹사이트를 거의 그대로 재활용할 수 있습니다.
   • 단점:
     • 성능: 웹뷰는 결국 내장된 브라우저 엔진 위에서 웹 페이지를 돌리는 것이기 때문에, 실제 네이티브 UI 컴포넌트를 사용하는 것보다 일반적으로 느립니다. 특히 애니메이션이나 복잡한 상호작용에서 버벅거리거나 부자연스러울 수 있습니다.
     • 사용자 경험(UX): 웹 페이지의 UI 요소(버튼, 스크롤 등)가 해당 OS의 네이티브 UI 요소와 다르게 보이거나 작동하여 사용자에게 이질감을 줄 수 있습니다. "앱 같지 않고 웹사이트 같다"는 느낌을 줄 수 있습니다.
     • 기기 기능 접근 제한: 카메라, GPS, 센서 등 스마트폰의 고유 기능을 사용하려면 웹과 네이티브 코드 간의 추가적인 연동 작업(브릿지)이 더 복잡할 수 있습니다.
2. React Native의 접근 방식 (네이티브 UI 중심):
   • React Native는 JavaScript와 React 문법을 사용하지만, 그 결과물이 웹뷰 안에 HTML로 그려지는 것이 아닙니다.
   • 대신, React Native 코드는 실제 네이티브 UI 컴포넌트로 변환(렌더링)됩니다.
     • 예를 들어, React Native에서 <View> 코드를 작성하면, iOS에서는 UIView라는 네이티브 UI 요소로, Android에서는 android.view.View라는 네이티브 UI 요소로 실제로 만들어집니다.
     • <Text>, <Image>, <TextInput> 등 다른 컴포넌트들도 마찬가지입니다.
   • 장점:
     • 성능: 실제 네이티브 UI를 사용하므로 웹뷰 기반 앱보다 훨씬 빠르고 부드러운 사용자 경험을 제공합니다.
     • 사용자 경험(UX): 각 OS의 표준 UI 컴포넌트를 사용하므로 사용자에게 익숙하고 자연스러운 느낌을 줍니다.
     • 기기 기능 접근 용이: 네이티브 API에 더 직접적으로 접근할 수 있는 구조입니다.