디바이스와 웹뷰 데이터 전달

웹뷰와의 통신을 위한 postMessage 방법을 소개합니다.

WebView 설정

onMessage 속성은 웹페이지에서 postMessage 를 통해 보낸 메시지를 수신하는 이벤트 핸들러입니다.

onMessage 는 웹뷰에서 메시지가 수신될 때 호출됩니다.

<WebView
  source={{
    uri: `${내컴퓨터접속주소}/section03/03-01-post-message-web-to-app`,
  }}
  onMessage={(event) => {
    if (!event.nativeEvent.data) return;

    alert(`Web에서 보내준 데이터: ${event.nativeEvent.data}`);
  }}
/>

Web에서 메시지 보내기

버튼 클릭시, ‘apple’ 이라는 문자열을 React Native 앱으로 전송합니다. 이때 웹뷰에서 onMessage 핸들러가 호출되며, event.nativeEvent.data 에는 ‘apple’ 이 저장됩니다.

declare const window: Window & {
  ReactNativeWebView: {
    postMessage: (message: string) => void;
  };
};

export default function PostMessageWebToAppPage() {
  const onClickButton = () => {
    window.ReactNativeWebView.postMessage("apple");
  };

  return <button onClick={onClickButton}>App아 데이터 줄게</button>;
}

이렇게 설정해둠으로서 웹과 React Native 앱 간의 데이터 전송 및 수신이 원활하게 이루어질 수 있습니다! 🤗

디바이스 API 설계

디바이스 API 란, 앱이 디바이스 기능(ex. 카메라, GPS 등) 에 접근할 수 있도록 해주는 인터페이스입니다. 이를 통해 앱이 디바이스의 기능을 효과적으로 활용할 수 있습니다.

아래 실행되는 함수는 모바일 애플리케이션에서 디바이스의 시스템 버전, 플랫폼 정보, 위치 정보를 비동기 적으로 요청을 보내고, 결과를 처리합니다.

  const { fetchApp } = useDeviceSetting();

  const onClickSystemVersion = async () => {
    const result = await fetchApp({ query: "fetchDeviceSystemForAppSet" });
    alert(result.data.fetchDeviceSystemForAppSet.appVersion);
  };

  const onClickSystemPlatform = async () => {
    const result = await fetchApp({ query: "fetchDeviceSystemForPlatformSet" });
    alert(result.data.fetchDeviceSystemForPlatformSet.modelName);
  };

  const onClickLocationLatLng = async () => {
    const result = await fetchApp({ query: "fetchDeviceLocationForLatLngSet" });
    alert(result.data.fetchDeviceLocationForLatLngSet.lat);
  };