본문 바로가기
프론트엔드/React & React-Native

리액트 네이티브 React Native | 브릿지(Bridge) 방식

by YUNI Heo 2024. 3. 19.
반응형

 

⭕ 리액트 네이티브 React Native | 브릿지(Bridge) 방식

리액트 네이티브(React Native)는 모바일 앱 개발에 있어 혁신적인 접근 방식을 제시합니다. 이 플랫폼은 안드로이드와 iOS 개발을 위해 각각 자바(Java)와 오브젝트-C(Objective-C) 또는 스위프트(Swift)로 작성된 기존의 네이티브 프레임워크에 의존합니다. 안드로이드의 경우 안드로이드 프레임워크, iOS의 경우 UIKit 프레임워크가 이에 해당합니다. 이 두 프레임워크는 각각의 운영체제에서 GUI 구성요소를 다루는 데 필요한 다양한 뷰(View) 클래스를 제공합니다.

 

➡️ 브릿지(Bridge) 방식

리액트 네이티브는 이러한 네이티브 프레임워크와 자바스크립트 엔진 간의 통신을 가능하게 하는 '브릿지' 방식을 채택합니다. 브릿지 방식은, 웹 브라우저에서 사용되는 자바스크립트 엔진의 핵심 부분을 이용하여, 자바스크립트로 작성된 컴포넌트가 네이티브 환경의 뷰 클래스를 호출할 수 있도록 연결합니다. 즉, 개발자가 자바스크립트로 작성한 코드는 브릿지를 통해 실제 네이티브 코드의 실행을 유발하며, 이는 안드로이드 또는 iOS의 네이티브 뷰를 생성하고 조작합니다.

 

➡️ 브릿지(Bridge) 방식 원리

  • 자바스크립트 측에서의 호출: 개발자가 리액트 네이티브를 사용하여 앱의 UI를 자바스크립트로 구현할 때, 이 코드는 먼저 자바스크립트 엔진에 의해 처리됩니다.
  • 브릿지를 통한 통신: 자바스크립트 엔진은 개발자의 코드에서 요청한 네이티브 뷰 생성 및 조작에 대한 명령을 브릿지를 통해 네이티브 코드에 전달합니다.
  • 네이티브 측의 실행: 네이티브 코드는 이 명령을 받아 실제로 운영체제의 UI 프레임워크를 사용하여 뷰를 생성하고 조작합니다.
  • 이벤트와 데이터의 역방향 통신: 사용자 인터랙션이나 다른 이벤트가 발생하면, 이 정보는 다시 브릿지를 통해 자바스크립트 엔진으로 전달되어 적절한 처리가 이루어집니다.

반응형