👀 Intro

상황

• React로 웹개발하고 Webview로 띄우는 방식인 하이브리드 앱 방식으로 진행했습니다.
• 하이브리드 앱 장점
  • 장점: 웹으로 개발하기 때문에 유지보수가 쉽고 IOS 와 안드로이드를 동시에 개발할 수 있다.
  • 단점: Webview로 띄우는 방식이기 때문에, 네이티브 방식 보다 느리고 밑의 그림같은 앱 내 효과를 사용하기 어렵다.
• 하이브리드 사용한 이유
  • 네이티브 보다 느리지만, 이커머스 서비스는 다른 앱 서비스에 비해 상대적으로 사용자 경험을 많이 요구하지 않음
  • 벤치마킹: 무신사, 온더룩, 캐치테이블 등 이미 많은 기업들이 하이브리드 앱 방식으로 개발을 진행

요구사항

• 서비스 기획 상 앱처럼 보여야 됐기 때문에 WebView 안에서 Stack Navigation 구현이 필요
• WebView 특성상 하나의 Sreen View에 웹페이지를 띄우는 방식이기에 페이지를 이동할 때마다 Stack Navigation를 할 수 없습니다.

해결 방안

많은 자료 조사 밑 고민 끝에 react-navigation 및 onMessage를 사용하고, 웹에서 Stack Navigation 과 관련 있는 페이지로 이동 시, postMessage를 사용하여 앱에 신호를 보내는 방식으로 구현했습니다.

문제 접근

• React Native 와 React 간의 브릿지 통신을 통해 Stack Navigation를 구현했습니다.

React Native 브릿지 통신

• 리액트 네이티브는 네이티브 프레임워크와 자바스크립트 엔진 간의 통신을 하게 되는 데, 이러한 방식을 브릿지 방식이라고 합니다.
• 브릿지 방식은 웹 브라우저에서 사용되는 자바스크립트의 엔진의 핵심 부분을 이용하여, 자바스크립트로 작성된 컴포넌트가 네이티브 환경이 뷰 클래스를 호출할 수 있도록 연결합니다.
• 리액트 네이티브는 이런한 방식을 채택하기 때문에, WebView의 리액트와 리액트 네이티브간의 브릿지 통신이 가능합니다.

React Native 웹뷰 통신

• socket 단위로 통신을 하기 때문에, 각 메시지를 보낼때, JSON을 문자열 형식으로 변환해서 보내야 합니다.