[React-Native] 웹뷰(WebView)와 웹 콘텐츠 간의 통신

React Native에서 웹뷰(WebView)와 웹 콘텐츠 간의 통신은 주로 두 가지 방법을 통해 이루어집니다.

1. JavaScript를 통한 메시지 전송 (postMessage): React Native의 WebView 컴포넌트는 웹 콘텐츠로 메시지를 보내고 웹 콘텐츠에서 메시지를 받을 수 있도록 postMessage 인터페이스를 제공합니다.
2. URL 스킴을 통한 메시지 전송: 커스텀 URL 스킴을 사용하여 애플리케이션과 웹 콘텐츠 간에 통신할 수 있습니다. 이 방법은 웹 페이지가 특정 URL 패턴을 로드하려고 할 때 트리거됩니다.

JavaScript를 통한 메시지 전송 (postMessage)

웹 페이지에서 postMessage를 사용하여 React Native로 메시지를 보내는 과정은 다음과 같습니다:

1. 웹 콘텐츠 내부에서 메시지 보내기: 웹 콘텐츠 내부의 JavaScript에서 window.ReactNativeWebView.postMessage(data)를 호출하여 메시지를 보냅니다. 여기서 data는 전송하려는 메시지입니다.
2. React Native에서 메시지 받기: React Native의 WebView 컴포넌트는 onMessage prop을 통해 메시지를 받습니다. 이 메소드는 웹 콘텐츠에서 보낸 데이터를 매개변수로 가지는 콜백 함수입니다.

<WebView
  source={{ uri: 'https://example.com' }}
  onMessage={(event) => {
    // 웹 콘텐츠에서 보낸 메시지 처리
    const message = event.nativeEvent.data;
    console.log(message);
  }}
/>

반대로, React Native에서 웹 페이지로 메시지를 보내려면 웹뷰의 injectJavaScript 메소드를 사용할 수 있습니다.

this.webview.injectJavaScript(`window.postMessage('${message}', '*');`);

URL 스킴을 통한 메시지 전송

커스텀 URL 스킴은 웹 페이지가 특정 URL 패턴을 로드하려고 할 때 React Native 앱에서 이를 감지하고 적절한 조치를 취하는 데 사용됩니다. 이 방법은 특히 React Native가 postMessage를 지원하지 않는 경우 유용합니다.

1. 웹 콘텐츠에서 커스텀 URL 스킴 사용: 웹 콘텐츠에서 JavaScript를 사용하여 커스텀 URL을 호출합니다. 예를 들어, myapp://doSomething라는 URL을 호출하도록 합니다.
2. React Native에서 URL 변경 감지: WebView 컴포넌트의 onNavigationStateChange 또는 onShouldStartLoadWithRequest prop을 사용하여 URL 변경을 감지하고 처리합니다.

<WebView
  onNavigationStateChange={(event) => {
    if (event.url.startsWith('myapp://')) {
      // 커스텀 URL 처리
    }
  }}
/>

이 두 메소드를 통해 React Native 앱과 웹 콘텐츠 간의 양방향 통신이 가능해집니다. 그러나 이 통신을 설정하고 사용하는 과정에서 보안을 고려해야 하며, 특히 URL 스킴을 사용할 때는 잠재적인 보안 취약점에 주의해야 합니다.

또한, 사용 중인 WebView 구현에 따라 정확한 prop 이름이나 메소드 사용법이 달라질 수 있으니 해당 문서를 참조하는 것이 중요합니다. 예를 들어, react-native-webview 라이브러리는 기본 WebView와 다른 API를 가질 수 있습니다.