React Native WebView 띄워보기

서비스에 웹뷰 도입을 미루다 드디어 도입하면서 간단하게 React Native에서 WebView를 설정하고 웹과 소통하는 것에 대해 소개한다. (100% 서비스에 도입된 느낌은 아니지만 tutorial 정도로 정리)

---

일단 해보기

1. Vite + React 웹 프로젝트 생성

   • 생략하겠습니다!

2. React Native 프로젝트 생성

npx @react-native-community/cli init App
cd App
npm install react-native-webview
cd ios && pod install && cd ..

• 공식 문서에서는 Expo와 같은 프레임워크 사용을 권장하지만,
• WebView 기능과 메시지 통신 같은 커스텀 처리를 하려면 Bare 환경이 더 적합할 수도 있습니다.(이젠 공식문서에서 권장하기에 아닐수도?)

3. WEB과 APP이 서로 소통할 때 type, payload 방식으로 메시지를 주고받습니다.

4. WebView를 컴포넌트화 하기

   • initialToken이 있다면 앱에서 웹으로 전달
   • 웹에서 앱으로 메시지를 보내면 handleMessage로 수신

// SmartWebView.tsx
// 자세한 WebView 메서드: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md

import React, { useEffect, useRef } from 'react';
import { KeyboardAvoidingView, Platform, View } from 'react-native';
import { WebView, WebViewMessageEvent } from 'react-native-webview';

interface SmartWebViewProps {
  url: string;
  initialToken?: string;
  onWebMessage?: (type: string, payload: any) => void;
}

export const SmartWebView = ({ url, initialToken, onWebMessage }: SmartWebViewProps) => {
  const webviewRef = useRef<WebView>(null);

  useEffect(() => {
    if (initialToken) {
      setTimeout(() => {
        webviewRef.current?.postMessage(
          JSON.stringify({ type: 'SET_TOKEN', payload: initialToken })
        );
      }, 1000);
    }
  }, [initialToken]);

  const handleMessage = (event: WebViewMessageEvent) => {
    try {
      const { type, payload } = JSON.parse(event.nativeEvent.data);
      onWebMessage?.(type, payload);
    } catch (e) {
      console.warn('Invalid message format', e);
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }} keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : -200}>
        <WebView
          ref={webviewRef}
          source={{ uri: url }}
          javaScriptEnabled
          onMessage={handleMessage}
        />
      </KeyboardAvoidingView>
    </View>
  );
};

5. App.tsx – WebView 컴포넌트 사용하기

import React from 'react';
import { SafeAreaView, Alert } from 'react-native';
import { SmartWebView } from './SmartWebView';

const App = () => {
  const handleWebMessage = (type: string, payload: any) => {
    if (type === 'HELLO') {
      Alert.alert('웹에서 온 메시지', payload);
    }
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <SmartWebView
        url={WEB_URL}
        initialToken="mock-access-token-123"
        onWebMessage={handleWebMessage}
      />
    </SafeAreaView>
  );
};

export default App;

6. 웹에서 메시지 수신 및 전송

import { useEffect, useState } from "react";

declare global {
  interface Window {
    ReactNativeWebView?: {
      postMessage: (message: string) => void;
    };
  }
}

function App() {
  const [accessToken, setAccessToken] = useState<string | null>(null);

  useEffect(() => {
    const handler = (event: MessageEvent) => {
      try {
        const message = JSON.parse(event.data);
        if (message.type === "SET_TOKEN") {
          setAccessToken(message.payload);
        }
      } catch (e) {
        console.warn("[web] JSON parse error:", e);
      }
    };

    window.addEventListener("message", handler);
    return () => window.removeEventListener("message", handler);
  }, []);

  function sendMessageToApp() {
    window.ReactNativeWebView?.postMessage(
      JSON.stringify({ type: "HELLO", payload: "Hi from Web!" })
    );
  }

  return (
    <div>
      <h1>Hello from Web</h1>
      <p>✅ Access Token: {accessToken}</p>
      <button onClick={sendMessageToApp}>앱을 수정해보았습니다!</button> // text를 변경해보았슴당 (앱으로 메시지 보내가 -> 앱을 수정해보았습니다!)
    </div>
  );
}

export default App;

---

결과 확인하기

---

마무리

• 앱에서 웹으로 전달, 웹에서 앱으로 전달 쉽고 간편하다.
• 그럼 앱 개발은 이제 무조건 웹뷰로 간다? 그건 아니라고 생각함.
• React Native로 WebView를 띄운다: 무조건적인 개발 방향은 아님. 과도하면 앱 심사도 막힐 수 있다고 함.
• Toss의 WebView 활용 전략 참고
• message 기반 통신은 유연하지만, 플랫폼별로 동작 차이가 있고 WebView로 다루기 어려운 모바일 기능들도 존재.
• 우리도 WebView는 변동 많고 실험성이 높은 화면(기획전, 커뮤니티 등) 위주로만 사용 중.
• 심사 부담 없이 빠르게 배포하고 핫픽스하기 좋아서 정확한 목적 하에 잘 쓰면 유용한 기술.

오랜만인데 이제 자주 블로그에 남겨야지...!