React Native - 웹뷰 통신 구현(TypeScript)

우선 React Native에서 웹뷰를 사용하기 위해서

react-native-webivew 라이브러리를 사용했습니다.

 

	RN	Webview
메시지 보낼 때	webviewRef.current.postMessage(JSON.stringify(message));	window.ReactNativeWebView?.postMessage(JSON.stringify(message));
메시지 받을 때	WebView 컴포넌트의  onMessage 속성을 사용합니다	//안드 document.addEventListener('message', getMessageListener); //ios window.addEventListener('message', getMessageListener);

 

 

RN에서 사용하는 예

ref를 사용해서 webview의 postMessage 메서드를 이용합니다

메시지를 보낼 때는 string만 보낼 수 있기 때문에

JSON.stringify로 메시지 객체를 스트링으로 변환합니다

 

웹뷰로부터 'WEBVIEW_LOADED_MESSAGE_TYPES' 타입의 메시지를 받으면 토큰을 전송하는 코드입니다

const HomePage = () => {
  const navigation = useNavigation<RootNavigatonProp>();
  const webviewRef = useRef<WebView | null>(null);
  const [token] = useRecoilState(tokenState);

  const postMessage = (message: MessageTypes) => {
    if (!webviewRef.current) return;
    webviewRef.current.postMessage(JSON.stringify(message));
  };

  return (
    <SafeAreaView style={{width: '100%', height: '100%'}}>
      <WebView
        ref={webviewRef}
        source={{uri: WEBVIEW_URI_DEV}}
        style={{flex: 1, width: '100%', height: '100%'}}
        onMessage={ev => {
          const {type, payload} = JSON.parse(
            ev.nativeEvent.data,
          ) as MessageTypes;

          switch (type) {
            case 'WEBVIEW_LOADED_MESSAGE_TYPES':
              if (token) postMessage(onLoginSuccessMessage(token));
              break;
            case 'NAVIGATE_MESSAGE_TYPES':
              navigation.push(payload.stack, payload.params);
              break;
          }
        }}
      />
    </SafeAreaView>
  );
};

export default HomePage;

 

 

 

 

웹뷰(Next)에서 사용하는 예

 

1. 컴포넌트가 마운트 되면 페이지가 로드됐다는 메시지를 RN으로 전송합니다

2. RN으로부터 'LOGIN_SUCCESS_MESSAGE_TYPES' 타입의 메시지를 받은 경우 payload에 담겨있는 토큰을 저장합니다

'use client';

import { tokenState } from '@/store/loginAtom';
import {
  MessageTypes,
  postMessageToWebview,
  webviewLoadedMessage,
} from '@/utils/message';
import { ReactNode, useCallback, useEffect } from 'react';
import { useSetRecoilState } from 'recoil';

const MessageWrapper = ({ children }: { children: ReactNode }) => {
  const setToken = useSetRecoilState(tokenState);

  const getMessageListener = useCallback((event: any) => {
    if (typeof event.data !== 'string') return;
    const eventData = JSON.parse(event.data) as MessageTypes;

    switch (eventData.type) {
      case 'LOGIN_SUCCESS_MESSAGE_TYPES':
        setToken(eventData.payload);
    }
  }, []);

  useEffect(() => {
    document.addEventListener('message', getMessageListener);
    window.addEventListener('message', getMessageListener);
    postMessageToWebview(webviewLoadedMessage());

    return () => {
      document.removeEventListener('message', getMessageListener);
      window.removeEventListener('message', getMessageListener);
    };
  }, []);

  return <div>{children}</div>;
};

export default MessageWrapper;

 

 

 

각 메시지들은 함수로 만들어서 사용합니다

type은 as const를 사용해서 그 자체로 타입을 인정받도록 했습니다

import {TabStackParamList} from '@/routes/TabNavigation';
import {TokenType} from '@/types/auth.types';
import {AllScreenParamsType, MainStackParamList} from '@/types/navigation.type';
import {NativeStackNavigationProp} from '@react-navigation/native-stack';

export const webviewLoadedMessage = () => ({
  type: 'WEBVIEW_LOADED_MESSAGE_TYPES' as const,
  payload: {},
});

export const onBackPressedMessage = () => ({
  type: 'BACK_PRESSED_MESSAGE_TYPES' as const,
  payload: {},
});

export const onExitAppMessage = () => ({
  type: 'EXIT_APP_MESSAEG_TYPES' as const,
  payload: {},
});

export const onLoginSuccessMessage = (token: TokenType) => ({
  type: 'LOGIN_SUCCESS_MESSAGE_TYPES' as const,
  payload: token,
});

export const logoutMessage = () => ({
  type: 'LOGOUT_MESSAGE_TYPES' as const,
  payload: {},
});

export const navigateMessage = (
  stack: keyof MainStackParamList | keyof TabStackParamList,
  params: AllScreenParamsType,
) => ({
  type: 'NAVIGATE_MESSAGE_TYPES' as const,
  payload: {stack, params},
});

export type MessageTypes =
  | ReturnType<typeof webviewLoadedMessage>
  | ReturnType<typeof onBackPressedMessage>
  | ReturnType<typeof onExitAppMessage>
  | ReturnType<typeof onLoginSuccessMessage>
  | ReturnType<typeof logoutMessage>
  | ReturnType<typeof navigateMessage>;

---

참고

https://velog.io/@imzzuu/React-Native-%EC%9B%B9%EB%B7%B0-%ED%86%B5%EC%8B%A0%ED%95%98%EA%B8%B0