문제 해결

React Native WebView Process Terminated 대응기

돌핀코딩 2025. 4. 24. 17:13

React Native로 하이브리드 앱을 개발하면서 WebView를 활용하는 경우가 많다.

하지만 iOS 환경에서 특정 페이지를 반복적으로 접근하거나 무거운 리소스를 로드할 때,

예상치 못한 흰 화면(백화) 현상이 발생했다.

 

에러 로그를 확인해보니 아래와 같은 메시지가 찍혔다.

Webview Process Terminated
onContentProcessDidTerminate triggered

 

이번 글에서는 이 문제의 원인과 해결 과정을 정리 해볼까한다.

문제 상황

  • 환경
    React Native WebView 사용
    주요 대상: iOS 디바이스 (Android에서는 발생하지 않음)
  • 현상
    1. 특정 페이지(WebView로 로드된 지도 화면 등)를 반복 접근
    2. 갑자기 화면이 흰색으로 멈춤, 백화 현상 발생 (렌더링 중단)
    3. 콘솔에 Process Terminated 로그 발생
  • 초기 대응
    WebView의 onContentProcessDidTerminate 콜백 이벤트를 활용해 재로딩 시도
<WebView
    source={{ uri: webUrl }}
    onContentProcessDidTerminate={(e) => webViewRef.current?.reload()}
    ref={webViewRef}
/>
종료된 시점의 화면을 다시 불러오는 콜백 로직 (방어 소스)
임시방편일 뿐 근본적인 해결은 아님

원인 분석

  1. iOS의 WebView 메모리 관리 정책
    • iOS는 WKWebView에서 메모리 사용량이 과도할 경우, 프로세스를 강제로 종료시켜 앱 전체 안정성을 확보함
    • 특히 리소스가 무거운 페이지(지도, 대용량 이미지)에서 자주 발생
  2. React Native WebView 한계
    • React Native의 WebView는 기본적으로 네이티브 브릿지를 통해 동작하기 때문에, 자원 누수가 발생할 가능성이 있음
    • 페이지 이동 시 캐시, 세션, 히스토리가 적절히 관리되지 않으면 누적 부담
  3. 반복적인 페이지 접근
    • 동일한 WebView 컴포넌트를 계속 마운트/언마운트 하면서 메모리 해제가 원활하지 않은 경우 발생

해결 과정

1. 불필요한 리소스 최소화

  • WebView 내에서 사용하는 JS, CSS, 이미지 최적화
  • Lazy Loading 적용
  • 지도와 같은 무거운 화면은 SPA(Single Page Application) 구조로 유지하고, 새로고침을 줄임

 

2. WebView 캐시 & 세션 관리

  • 화면 전환 시 불필요한 데이터 클리어
useEffect(() => {
    return () => {
        webViewRef.current?.clearCache(true);
    };
}, []);
clearCache() 호출 시 localStorage는 유지되지만, 세션 스토리지와 캐시만 삭제됨

 

3. onContentProcessDidTerminate 핸들링 강화

  • 단순히 reload()만 하지 않고, 사용자에게 안내 메시지 추가
const handleProcessTerminate = () => {
    Alert.alert('안내', '페이지가 새로고침됩니다.');
    webViewRef.current?.reload();
};

<WebView
    source={{ uri: webUrl }}
    onContentProcessDidTerminate={handleProcessTerminate}
    ref={webViewRef}
/>

 

4. WebView 재사용 구조 설계

  • WebView 컴포넌트를 매번 새로 생성하지 않고, 하나의 인스턴스로 관리
  • React Navigation과의 연계 시에도 최대한 Unmount 방지

최종 정리

  • 완벽한 근본 해결은 어렵지만, 리소스 최적화 + 캐시 관리 + 사용자 친화적 대응으로 실사용 문제는 충분히 방지 가능
  • 특히 WebView를 활용한 앱이라면, 메모리 관리 전략을 초기에 설계하는 게 중요

관련 자료