[React] Flutter webview ↔ React 데이터 통신

버전 정보

React : 18.3.1
Flutter : 3.24.3

 

이번에 Flutter 앱과 React 웹과의 데이터 통신이 필요하게 되어 Flutter에 문외한인 나는 Chatgpt와 구글링을 열심히 했다.
테스트용 Flutter 코드는 제공받았지만 Dart 문법을 아예 몰랐기 때문에 내가 사용할 부분 만큼은 이해할 필요가 있었다.
이전에 React Native와 데이터 통신을 했던 경험이 있던지라 금방 처리될 것이라 생각했다. (플래그 ON)

작성한 코드는 아래와 같았다.

Flutter

// main.dart

controller
	..addJavaScriptChannel(
    	'FlutterWebView', // JavaScript에서 호출할 채널 이름
        onMessageReceived: (JavaScriptMessage message) {
        	print(message.message);
            _controller.runJavaScript("alert('appToWeb')")
        }
	)
 _controller = controller;

 

React

import React, { useEffect } from 'react';
import './App.css';

function App() {
  useEffect(() => {
    // @ts-ignore
    window.FlutterWebView.postMessage("웹에서 앱으로 보냄", "*");
  }, []);

  return (
    <div></div>
  );
}

export default App;

 

Flutter 쪽에서는 "웹에서 앱으로 보냄"이라는 데이터는 잘 확인이 된다.

그런데 앱에서 웹뷰 브라우저로 전송한 데이터를 alert로 확인을 해보려고 했으나 기다리고 기다려도 아무런 동작이 일어나지 않았다...

어떻게든 데이터가 잘 넘어오는지 확인하리라 생각하고 구글링과 Chatgpt를 열심히 활용했지만 해결은 커녕 점점 미스테리가 되어가고 있었다.

그러던 중 아래의 글을 발견하게 된다.

 

https://github.com/flutter/flutter/issues/30358#issuecomment-512763237

alert() method doesn't work in WebView · Issue #30358 · flutter/flutter

 

키에에에에에엨... 애당초에 alert가 안되는거였다... 여긴 어디 나는 누구

그래서 에라 모르겠다 alert로 확인하려 하지 말고 직접 데이터를 뷰에 때려박아보자 하고 아래와 같이 코드를 수정했다.

Flutter

// main.dart

controller
	..addJavaScriptChannel(
    	'FlutterWebView', // JavaScript에서 호출할 채널 이름
        onMessageReceived: (JavaScriptMessage message) {
        	print(message.message);
            _controller.runJavaScript("window.appToWeb('appToWeb')")
        }
	)
  _controller = controller;

React

import React, { useEffect, useState } from 'react';
import './App.css';

function App() {
  const [data, setData] = useState(null); // 토큰을 저장할 상태

  useEffect(() => {
    // @ts-ignore
    window.FlutterWebView.postMessage("웹에서 앱으로 보냄", "*");
    (window as any).appToWeb = function (appData: any) {
      setData(appData);
    };
  }, []);

  return (
    <div>
      {data ? (
        <div>
          <p>받은 데이터: {data}</p>
        </div>
      ) : (
        <p>토큰을 기다리는 중...</p>
      )}
    </div>
  );
}

export default App;

 

마참내 양측에서 정상적으로 데이터가 오가는 것을 확인한 뒤 해방될 수 있었다...

개발함에 있어서 삽질이 없을 수는 없지만 이런 간단한 이슈로 인한 삽질은 크나큰 현타를 가지고 온다.

커피와 함께 리프레시를 해야겠다...