웹뷰와 네이티브 앱 간의 통신 설정하기

웹뷰(WebView) 화면에서 특정 이벤트를 앱으로 전달해야 하는 상황이 발생하여 프로젝트에 이를 추가하게 되었습니다. 이 글에서는 네이티브 앱(Android, iOS)과의 통신 방법을 설명합니다. TypeScript와 React를 사용하여, 네이티브 앱과의 통신을 설정하기 위해 useNativeCommunication 훅을 구현했습니다.

1. NativeAction 타입 정의

type NativeAction =
  | 'withdrawal'
  | 'logout'
  | 'close'
  | 'goHome'
  | 'loadfinished';

• 네이티브 앱에서 수행할 수 있는 액션 타입들을 정의합니다. 각 액션은 문자열 리터럴 타입으로 정의되어 있습니다.

2. useNativeCommunication.ts 훅 정의

• useNativeCommunication.ts 파일을 생성하고, 네이티브 앱과 통신하기 위한 훅 정의

import { useCallback } from 'react';

/** 네이티브 앱과의 통신 훅 */
const useNativeCommunication = () => {
  const communicateWithNative = useCallback((action: NativeAction) => {
    if (window.Android) {
      // AOS 네이티브 코드와 통신
      if (typeof window.Android[action] === 'function') {
        window.Android[action]?.();
      } else {
        console.error(
          `Android 인터페이스에 ${action} 함수가 존재하지 않습니다.`,
        );
      }
    } else if (
      window.webkit &&
      window.webkit.messageHandlers &&
      window.webkit.messageHandlers.ios
    ) {
      // iOS 네이티브 코드와 통신
      window.webkit.messageHandlers.ios.postMessage(action);
    } else {
      console.error('IOS 네이티브 통신이 지원되지 않습니다.');
    }
  }, []);

  return { communicateWithNative };
};

export default useNativeCommunication;

2-1. communicateWithNative 함수 정의

• useCallback을 사용하여 communicateWithNative 함수를 정의합니다. useCallback을 사용함으로써 함수가 항상 동일한 참조를 가지도록 하여 불필요한 리렌더링을 방지합니다.
• communicateWithNative 함수는 action이라는 매개변수를 받아 네이티브 앱과 통신합니다. action은 NativeAction 타입이어야 합니다.

2-2. Android|iOS 네이티브 통신

• window.Android 객체가 존재하는지 확인하여 안드로이드 네이티브 환경인지 확인합니다.
• window.webkit 객체와 그 하위 객체들이 존재하는지 확인하여 iOS 네이티브 환경인지 확인합니다.

3. 글로벌 타입 정의

• TypeScript에서 글로벌 객체(window)를 확장하여 네이티브 앱과 통신할 수 있는 인터페이스를 정의합니다. 이를 위해 global.d.ts 파일을 생성합니다.

// global.d.ts
interface AndroidInterface {
  withdrawal?: () => void;
  logout?: () => void;
  close?: () => void;
  goHome?: () => void;
  loadfinished?: () => void;
}

interface IOSInterface {
  postMessage: (action: string) => void;
}

interface WebkitInterface {
  messageHandlers: {
    ios: IOSInterface;
  };
}

// Window객체 타입 확장
interface Window {
  Android?: AndroidInterface;
  webkit?: WebkitInterface;
}

4. 사용 예시

• useNativeCommunication 훅을 사용하여 네이티브 앱과의 통신을 설정합니다.

import React from 'react';
import useNativeCommunication from './useNativeCommunication';

const App = () => {
  const { communicateWithNative } = useNativeCommunication();

  const handleLogout = () => {
    communicateWithNative('logout'); // 앱 통신
  };

  return (
    <div>
      <button onClick={handleLogout}>Logout</button>
    </div>
  );
};

export default App;

이 설정을 통해 웹뷰와 네이티브 앱 간의 통신을 원활하게 하여 사용자 경험을 향상시킬 수 있습니다.