From 453e2e57dbc188471364abb42b6937d06d5c5db6 Mon Sep 17 00:00:00 2001
From: IGhos-P <dndb3599@gmail.com>
Date: Thu, 23 Jun 2022 16:09:41 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20web<->RN=20=ED=86=B5=EC=8B=A0=20?=
 =?UTF-8?q?=EC=84=B1=EA=B3=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yam-view/src/App.js | 54 ++++++++++++++++++++++-----------------------
 1 file changed, 26 insertions(+), 28 deletions(-)

diff --git a/yam-view/src/App.js b/yam-view/src/App.js
index 339bf93..64a04d3 100644
--- a/yam-view/src/App.js
+++ b/yam-view/src/App.js
@@ -1,43 +1,41 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { HashRouter as Router, Switch, Route } from "react-router-dom";
 import WebView from "./pages/WebView";
 import axios from "axios";
 
 //axios.defaults.withCredentials = true;
-/**
- * RN에서 온 정보를 듣는 함수
- */
-const RNListener = () => {
-  /** react native 환경에서만 가능 */
-  const listener = (event) => {
-    const { data, type } = JSON.parse(event.data);
-    if (type === "RN_TO_YAM_VIEW") {
-      console.log("RN_TO_YAM_VIEW", data);
-    }
 
-    if (type === "TOKEN") {
-      // type이 TOKEN이기 때문에 이곳에 콘솔이 찍히게 됩니다.
-      console.log(data); // xxxxx
-    } else if (type === "NOTIFICATION") {
-      console.log("NOTIFICATION");
+function App() {
+  // 받아오는 값에 따라 달라지는 tag 값
+  const [textValue, setTextValue] = useState("");
+
+  /** react native 환경에서만 가능 */
+  const onMessageHandler = (e) => {
+    const event = JSON.parse(e.data);
+    window.ReactNativeWebView.postMessage(JSON.stringify({ event: event }));
+    if (event.changeText) {
+      console.log(event.changeText);
+      setTextValue(event.changeText);
     }
   };
 
-  if (window.ReactNativeWebView) {
-    /** android */
-    document.addEventListener("message", listener);
-    /** ios */
-    window.addEventListener("message", listener);
-  } else {
-    // 모바일이 아니라면 모바일 아님을 alert로 띄웁니다.
-    console.log("모바일이 아님");
-  }
-};
+  // tagChange
+  useEffect(() => {
+    const isUIWebView = () => {
+      return navigator.userAgent
+        .toLowerCase()
+        .match(/\(ip.*applewebkit(?!.*(version|crios))/);
+    };
 
-function App() {
+    const receiver = isUIWebView() ? window : document;
+
+    receiver.addEventListener("message", onMessageHandler);
+    return () => {
+      receiver.removeEventListener("message", onMessageHandler);
+    };
+  });
   return (
     <Router>
-      <RNListener />
       <Switch>
         <Route exact path="/" component={WebView} />
       </Switch>