React Native WebView란?
React Native 개발하면서 정말 많이 사용하게 되는 WebView에 대해 이야기해보려고 합니다.
WebView?
WebView는 쉽게 말해서 앱 안에 있는 작은 브라우저라고 생각하면 됩니다. Chrome이나 Safari로 웹사이트를 보는 것처럼, 앱 안에서 웹 콘텐츠를 보여주는 컴포넌트입니다.
React Native에서는 원래 코어에 WebView가 포함되어 있었는데, 0.60 버전부터는 별도의 라이브러리로 분리. 그래서 지금은 react-native-webview라는 커뮤니티 라이브러리를 사용해야 합니다.
언제 WebView를 써야 할까?
굿굿 👍
-
앱 스토어 심사 없이 즉시 업데이트 가능한 콘텐츠
- 개발 리소스가 줄일 때
-
자주 업데이트되는 콘텐츠
- 뉴스, 블로그, 게시판처럼 콘텐츠가 자주 바뀌는 경우
-
특정 기능만 웹으로 처리하고 싶을 때
- 결제 페이지, 로그인 플로우, 이벤트 페이지 등
- 웹에서 이미 검증된 복잡한 로직을 그대로 사용하고 싶을 때
-
하이브리드 앱 구조
- 메인 기능은 네이티브로, 서브 기능은 웹뷰로 구성
- 토스처럼 사용자 경험이 중요한 곳은 네이티브, 실험적인 기능은 웹뷰로
피하기 👎
-
성능이 중요한 기능
- 복잡한 애니메이션이나 실시간 인터랙션
- 게임이나 영상 스트리밍 같은 무거운 작업
-
네이티브한 느낌이 중요할 때
- 사용자가 "이거 웹사이트네?"라고 느끼면 안 되는 경우
- 플랫폼별 디자인 가이드라인을 정확히 따라야 할 때
🛠️ 세팅법
설치하기
# npm
npm install react-native-webview
# yarn
yarn add react-native-webview
# iOS 추가 설정 (iOS만)
cd ios && pod install기본 사용법
import React from 'react';
import { WebView } from 'react-native-webview';
const MyWebView = () => {
return (
<WebView
source={{ uri: 'https://your-website.com' }}
style={{ flex: 1 }}
/>
);
};
export default MyWebView;💬 앱과 웹뷰의 소통
앱 → 웹으로 데이터 보내기
//웹뷰 컴포넌트 적극 사용하기
import React, { useRef } from 'react';
import { WebView } from 'react-native-webview';
const MyWebView = () => {
const webViewRef = useRef(null);
const sendDataToWeb = () => {
const data = { type: 'USER_INFO', name: '홍길동', age: 25 };
webViewRef.current?.postMessage(JSON.stringify(data));
};
return (
<WebView
ref={webViewRef}
source={{ uri: 'https://your-website.com' }}
onLoadEnd={sendDataToWeb} // 웹 로딩 완료 후 데이터 전송
/>
);
};웹 → 앱으로 데이터 보내기
웹 쪽 코드:
// 웹에서 앱으로 메시지 보내기
const sendToApp = () => {
const data = { type: 'NAVIGATE', screen: 'home' };
window.ReactNativeWebView?.postMessage(JSON.stringify(data));
};
// 앱에서 온 메시지 받기
useEffect(() => {
const handleMessage = (event) => {
const data = JSON.parse(event.data);
console.log('앱에서 받은 데이터:', data);
};
// Android와 iOS 구분해서 이벤트 리스너 등록
const isAndroid = navigator.userAgent.includes('Android');
const eventType = isAndroid ? 'message' : 'message';
document.addEventListener(eventType, handleMessage);
return () => {
document.removeEventListener(eventType, handleMessage);
};
}, []);앱 쪽 코드:
const handleWebViewMessage = (event) => {
const data = JSON.parse(event.nativeEvent.data);
if (data.type === 'NAVIGATE') {
// 특정 화면으로 이동
navigation.navigate(data.screen);
}
};
return (
<WebView
source={{ uri: 'https://your-website.com' }}
onMessage={handleWebViewMessage}
/>
);🎨 사용자 경험 개선하기
로딩 상태 처리
WebView는 웹페이지를 로드해야 하니까 로딩 시간이 있다. 사용자가 빈 화면을 보지 않도록 로딩 인디케이터를 추가하기.
뒤로가기 처리
Android에서 하드웨어 뒤로가기 버튼을 눌렀을 때, 웹뷰 내에서 뒤로가기가 되도록 처리할 수 있다.
⚠️ 주의사항
1. 성능 이슈
WebView는 네이티브 코드와 웹 코드가 함께 실행되면서 CPU 사용량과 메모리 사용량이 높아질 수 있다. 또한 배터리 소모도 네이티브 앱보다 많다.
2. 네트워크 의존성
WebView는 기본적으로 웹페이지를 로드해야 하니까 인터넷 연결이 필요. 오프라인 상황에 대한 대비책도 마련해두기.
3. 보안 고려사항
외부 웹사이트를 로드할 때는 보안에 주의해야 한다. 신뢰할 수 있는 도메인만 허용하도록 설정하는 것이 좋다.
<WebView
source={{ uri: 'https://your-website.com' }}
originWhitelist={['https://your-website.com']}
mixedContentMode="never"
/>4. 플랫폼별 차이점
iOS와 Android에서 WebView 동작이 조금씩 다를 수 있다.
