나는 회사에서 앱을 개발하고 있다. 보통 앱 개발을 한다고 하면 React Native, flutter, swift, kotlin을 사용해서 개발할 거라고 생각하지만 나는 Next.js로 개발하고 개발한 화면을 react-native 웹뷰로 띄워서 보여주는 방식으로 개발하고 있다.

처음에는 웹뷰를 통한 개발 방식이 쉽게 이해가지 않았었는데 이제는 익숙해지기도 했고 혹시 예전에 나처럼 웹뷰 개발에 대해서 궁금하거나 어려운 사람들을 위해서 정리해보고자 한다! ✨

1. 웹뷰란?

---

웹뷰는 모바일 어플리케이션에서 웹 콘텐츠(웹 페이지)를 표시하는 컴포넌트이다. 네이티브 앱 내부에 HTML, CSS, Javascript 로 작성된 웹 페이지를 렌더링하는 방식으로 주로 네이티브와 웹을 혼합한 하이브리드 앱에서 많이 사용된다.

우리 회사같은 경우에는 앱 내부의 모든 페이지 및 기능들을 Next.js로 개발하고 있다. 즉, 개발 방식은 웹 개발과 동일하며 Next.js로 개발한 웹페이지를(URL) 웹뷰를 통해 보여준다.

react-native-webview

react-native에서 웹뷰를 사용하기 위해서는 react-native-webview 라이브러리가 필요하다.
react-native 초기 버전에는 WebView 가 내장된 컴포넌트였으나, 현재는 별도의 패키지로 분리되어 react-native-webview 라는 이름으로 제공되고 있다.

이 라이브러리를 통해서 웹 페이지와 네이티브 앱 간의 통신과 상호작용을 관리할 수 있다. 간단한 예시 코드를 통해 기본 구조를 살펴보자.

WebView 컴포넌트에서 제공하는 옵션은 매우 많지만 가장 기본으로 알고 있어야 하는 두가지 정도만 소개하려고 한다.

import React from 'react';
import { WebView } from 'react-native-webview';

const MyWebView = () => {
  
  const handleMessage = (event) => {
    alert("Message from WebView: " + event.nativeEvent.data);
  };
  
  return (
    <WebView 
      source={{ uri: "https://example.com" }} 
  	  onMessage={handleMessage}
    />
  );
};

export default MyWebView;

• source
  • 웹뷰에서 로드할 콘텐츠를 지정하는 옵션이다.
  • URL을 전달하면 해당 웹 페이지가 웹뷰 내에서 랜더링된다.
• onMessage
  • 웹 페이지와 네이트브 앱 간의 통신을 처리하는 옵션이다.
  • 웹뷰에서 수신한 메세지를 처리합니다. 웹 페이지에서 Javascript로 메세지를 전송하면 해당 함수가 호출된다. (자세한 예시는 아래에서 살펴보도록 할게요)

2. 웹뷰 통신이 필요할 때는?

---

웹에서는 제공하지 않는 앱에서만 제공하는 기능을 필요할 때 웹뷰 통신을 한다. 내가 경험했던 것을 예로 들자면 모달에서 흔히 볼 수 있는 1일 동안 보지 않기 , 알림 설정 허용/거부 등 여러가지 기능이 존재한다. 이런 기능들은 일반적인 웹 페이지에서는 구현할 수 없고 네이티브 기능을 직접 활용해야하기 때문에 네이티브 코드에서 처리한 후 그 결과를 웹 페이지로 다시 전달해야한다.

이런 네이티브 기능은 실제 디바이스나 시뮬레이터에서만 확인할 수 있기 때문에 개발 중에는 시뮬레이터를 통해 테스트를 진행하며 통신이 올바르게 이루어지는지 확인하는 것이 중요하다.

3. 예시 코드

---

웹뷰 통신을 할때는 위에서 언급했던 react-native-webview를 통해서 할 수 있다. 이해를 돕기 위해서 자세한 예시를 살펴보도록 하자.

asyncStorage

asyncStorage 는 내가 웹뷰 통신에서 가장 자주 사용하는 기능이다. 이름부터 감이 오겠지만 웹에서의 localStorage와 같은 역할을 한다고 생각하면 된다.

웹에서 클라이언트단에서 어떠한 정보를 임시로 저장해야할 때 사용하는 곳이 localStorage인데 앱에서도 어떠한 정보를 디바이스에 저장해야할 때 사용하는 것이 asyncStorage이다.
localStorage 처럼 Key 와 value 값으로 이루어져 저장하고 수정하고 삭제할 수 있다.

asyncStorage가 필요한 경우는 다양하지만 대표적으로 다시 보지 않기 가 있다.

이해를 돕기위한 예제 코드로 생략된 부분이 있을 수 있으니 이 점 참고해주세요

1. Next.js -> RN으로 데이터 보내기

// Next.js

const EventModal = () => {
	
    // react native 로 메세지 전송
    const handleClickClose = () => {
       window.ReactNativeWebView.postMessage("hideOneDay")
    }  
  

	return (
    	<div>
           ...
           <button onClick={handleClickClose}>다시 보지 않기</button>
        </div>
    )

}

export default EventModal

• window.ReactNativeWebView.postMessage("hideOneDay")를 호출하여, 웹 페이지에서 React Native 웹뷰로 "hideOneDay"라는 메세지를 전달한다.
• 이 메세지는 React Native 애플리케이션으로 전달되어 특정 동작(예: "다시 보지 않기" 설정)을 트리거하게 된다.

2. RN에서 수신된 데이터 저장하기

// React Native

import { WebView } from 'react-native-webview';
import AsyncStorage from '@react-native-async-storage/async-storage';

const App = () => {
  
  // 웹뷰에서 받은 메시지 처리
  const handleMessage = async (event) => {
    const message = event.nativeEvent.data;
    if (message === "hideOneDay") {
      try {
        // AsyncStorage에 데이터 저장
        await AsyncStorage.setItem("hideOneDay", "true");
        alert("모달을 다시 보지 않도록 설정이 완료되었습니다.");
      } catch (error) {
        console.error("Error saving data to AsyncStorage", error);
      }
    }
  };

  return (
   <WebView 
      source={{ uri: "https://example.com"}} 
      onMessage={handleMessage}
    />
  )
}


export default App

• handleMessage를 통해서 수신된 메세지를 처리한다.
  • event.nativeEvent.data를 통해 수신된 메시지를 확인하고, 메시지가 "hideOneDay"일 때, AsyncStorage에 "hideOneDay" 키로 "true" 값을 저장하게 된다.
• 정상적으로 저장에 성공하면 alert이 노출된다.

3. RN에서 저장된 데이터 불러오기

// React Native

import { WebView } from 'react-native-webview';
import AsyncStorage from '@react-native-async-storage/async-storage';

const App = () => {
  const webViewRef = useRef(null);
  
  ...
  
  // 저장된 데이터 불러와 웹뷰로 전송
  useEffect(() => {
  	const checkAsyncStorage = async () => {
       try {
        const hideOneDay = await AsyncStorage.getItem("hideOneDay");
        
        if (hideOneDay === 'true' && webViewRef.current) {
          // 저장된 데이터가 있으면 웹뷰로 메시지 전송
          webViewRef.current.postMessage("hideModal");
        }
      } catch (error) {
        console.error('Error retrieving data from AsyncStorage', error);
      }
    };
    
    checkAsyncStorage();
  }, [])

  return (
   <WebView 
      ref={webViewRef}
      source={{ uri: "https://example.com"}} 
      onMessage={handleMessage}
    />
  )
}


export default App

• webViewRef 설정을 통해서 웹뷰에 직접 접근할 수 있다.
• useEffect를 통해 checkAsyncStorage 함수가 실행되고 AsyncStorage 에서 "hideOneDay" 값을 불러온다. 만약 true로 설정되어 있으면 webViewRef.current.postMessage("hideModal") 로 호출하여 웹뷰로 "hideModal" 을 전송하며 이를 통해 웹 페이지에서 모달을 숨길 수 있다.

4. Next.js에서 모달 숨기기

import EventModal from "./EventModal"

const Home = () => {
  
  // 모달의 표시 여부를 상태로 관리
  const [isModalVisible, setModalVisible] = useState(true);

  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      // 메시지 내용 확인
      if (event.data === "hideModal") {
        // 모달 숨기기
        setModalVisible(false);
      }
    };

    // 메시지 이벤트 리스너 등록
    window.addEventListener("message", handleMessage);

    // 컴포넌트 언마운트 시 이벤트 리스너 제거
    return () => {
      window.removeEventListener("message", handleMessage);
    };
  }, []);
  
	return (
     <div>
        {isModalVisible && <EventModal />}
       	<h1>메인 페이지</h1>
      </div>
    )
}

export default Home

• useEffect를 통해 페이지가 랜더링되면 window.addEventListener("message", handleMessage) 를 호출하고 handleMessage 함수를 통해 "hideModal" 메세지를 받으면 isModalVisible 상태값을 업데이트 시켜 모달을 숨긴다.

4. 마무리

---

입사하고 같이 취업을 준비하던 동기들을 만나면 "회사에서 어떤 일을 하고 있어요?"가 가장 많이 듣는 질문이었다. 그리고 앱 개발을 한다고 하면 "React Native 사용하시나요?"라고 물어보시는데, 이때마다 난감(?)할 때가 있었다. 왜냐하면 우리 앱은 React Native로 되어있긴 하지만 그때 나는 React Native를 전혀 만지지 않고 있었고 Next.js로만 개발하고 있었기 때문이다.

생각해보면 그때 나는 웹뷰 개발에 대해 제대로 이해하고 있지 못해서 남에게 설명하는 데 자신이 없었던 것 같다. 하지만 언제나 그렇듯 막상 겪어보면 별거 없고 익숙해지기 마련이다. 2년차 개발자가 된 지금은 웹뷰 앱 개발에 대해 누가 물어본다면 자세하게 설명해줄 수 있다. 그래서 혹시 웹뷰 개발을 이제 막 시작했거나 궁금증을 가진 분들에게 도움이 되었으면 좋겠다는 마음으로 이 글을 쓰게 됐다.

물론 글을 정리하면서 나도 웹뷰에 대해 다시 한 번 정리하게 되어 좋았다. 이래서 블로그를 꾸준히 써야 하나보다ㅎㅎ 기록의 중요성!

사실 회사 코드에서 내가 사용한 부분을 예제로 가져오고 싶었는데, 회사 코드에서는 sendMessage 부분(RN 통신)을 lib 폴더에 모듈화해서 사용하고 있어서 내가 소개하고 싶었던 부분 외에도 복잡한 부분이 많아 직접 예제 코드를 만들었다. 이번 포스팅에서는 RN 통신의 기본 개념에 대해서만 소개하려고 했기 때문에 너무 딥한 내용은 최대한 덜어내려고 했다. RN 통신의 심화 버전은 다음 포스팅에서 다뤄야겠다.

📚 참고

1. [FrontEnd] Webview로 React를 App으로 만들기
2. react native webview 사용법