[react-native] react-native와 webview 통신

최근에 웹뷰인 React Native 앱 서비스를 다뤄보는 경험을 했다.

앱 내에서 웹뷰를 띄워보는 희귀한 경험을 해서 꼭 블로그에 작성해야겠다고 다짐했다!

 

 

앱 내에서 webview를 띄우면서 가장 중요하고자 어려웠던 부분을 기록하고자 한다.

 

보통 앱 내에서 사용자들의 히스토리를 기록하고 로깅하고자 로그 이벤트를 기록한다.

그러기 위해서는 웹뷰에서 일어난 이벤트들을 RN에서 감지해야 한다.

 

 

목차

1. React-native와 Webview 통신

2. 내가 처했던 문제 상황

---

React-native와 Webview 통신

1. Web -> RN

 

Web: postMesageKey 전달

 

RN: postMessageKey event를 받아 동작시킨다.

 

위의 예시에서 test data를 받도록 해놨는데, 만약 data를 넘겨줘야 한다면 위의 방식과 같이 넘겨주면 된다.

 

 

2. RN -> Web

 

RN: WebView 속성 중 onLoadStart를 사용해서 들어가자마자 data 전송

 

RN: data 안에 isPremium 값을 보내준다.

 

Web: Type 지정

 

Web: data 안에 우리가 지정해준 data 타입으로 받는다.

 

---

내가 처했던 문제 상황

What?

Web에서 RN에 데이터를 전송하는 것은 굉장히 easy 했다. 

위의 코드처럼 RN에서 Web으로 데이터를 전송할 때

웹뷰 로드가 시작되면 데이터가 바로 전송되야 했다.

하지만 RN 측에서는 데이터를 잘보내줌에도 불구하고, 웹뷰에서는 첫 렌더링 때 값을 가져오지 못하는 문제가 발생했다.

 

 

 

How Solve?

값을 보내주지 말고, localStorage에 저장한 후 웹뷰가 로딩될 때마다 가져오자!

 

RN에서 해당 값을 localStorage에 저장한다.

 

Web: didMount 될 때마다 localStorage에서 값을 가져온다.

 

이렇게 문제를 해결할 수 있었다. 

 

 

 

 

이 블로그를 통해 누군가 도움이 되었다면 그것만으로 만족스럽다 ㅎ