웹뷰(WebView) 화면에서 특정 이벤트를 앱으로 전달해야 하는 상황이 발생하여 프로젝트에 이를 추가하게 되었습니다. 이 글에서는 네이티브 앱(Android, iOS)과의 통신 방법을 설명합니다. TypeScript와 React를 사용하여, 네이티브 앱과의 통신을 설정하기 위해 useNativeCommunication
훅을 구현했습니다.
NativeAction
타입 정의type NativeAction =
| 'withdrawal'
| 'logout'
| 'close'
| 'goHome'
| 'loadfinished';
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;
// 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;
}
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;
이 설정을 통해 웹뷰와 네이티브 앱 간의 통신을 원활하게 하여 사용자 경험을 향상시킬 수 있습니다.