RN을 공부하다보니까, 전부다 RN으로 개발하는 것이 비효율적이라는 생각이 들었다.

1. 아무리 동일한 리액트 코어 패키지를 사용하더라도 네이티브 기반이다보니 러닝커브가 있다.
2. 배포를 한다고 하더라도 네이티브 기반이므로 꾸준히 계속 빌드해주어야한다.
3. 논외의 이야기이지만 혼자서 사이드로 웹스킴 작업을 안한지 오래 됐다.

그래서 아예 이 참에 말로만 들어보던 웹뷰를 직접 RN에서 띄워보고 싶어졌다.

웹뷰의 기본 아키텍쳐는

┌───────────────────────────────────┐
│        React Native App           │
│  ┌──────────────────────────────┐ │
│  │         WebView              │ │
│  │  ┌─────────────────────────┐ │ │
│  │  │        웹 스킴            │ │ │
│  │  │                         │ │ │
│  │  └─────────────────────────┘ │ │
│  └──────────────────────────────┘ │
│    + Native 기능들                  │
│    (카메라, 파일시스템, 푸시알림)   │    │
└───────────────────────────────────┘

따지면 이렇다 볼 수 있다.

RN에서는 기본적으로 이미 많은 모듈들이 제공되는데 웹뷰 모듈 또한 구현되어있다.

      <WebView
        source={{ uri: getLocalUrl() }}
        style={styles.webview}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        startInLoadingState={true}
        scalesPageToFit={true}
        renderLoading={() => (
         // loading fallback
        )}
        renderError={(errorName) => (
          // 에러 fallback
        )}
        onLoadEnd={() => {
          // 로드 끝난 후의 콜백
        }}
      />

- source

source는 웹뷰를 띄울 웹 리소스를 의미한다. 로컬에서 개발한다면 localhost:3000이 될 수도 있고, 배포 사이트를 적용시킨다면 배포 된 url이 될 수도 있다.

- style

웹뷰 컨테이너의 레이아웃 스타일을 지정한다. 보통 flex:1로 화면을 차지하게 한다.

- javaScriptEnabled

자바스크립트 실행 여부를 의미한다. true로 설정한다면 자바스크립트 실행을 허용하고, 그게 아니라면 false로 설정한다. 보안이 중요한 경우 false로 두고, 대부분의 웹에선 자바스크립트를 실행시키므로 true로 둔다.

- domStorageEnabled

로컬/세션 스토리지 사용 여부이다. true로 두면 웹스토리지 관련 API를 사용할 수 있고, false라면 웹 스토리지는 사용 불가능하다.

- startInLoadingState

웹뷰를 띄울때의 로딩 상태를 표시한다. true로 둔다면 기본 로딩 스피너를 띄우고, renderLoading과 함께 사용한다면 커스텀 로딩 스피너를 띄울 수 있다.

- renderLoading

웹뷰를 띄우기 전에 보여줄 loading fallback이다.

- scalesPageToFit

웹페이지가 모바일 화면에 맞게 자동으로 크기가 조절되게 해준다. true로 둔다면 페이지가 화면 크기에 맞게 축소/확대 되고, 그게 아니라면 원본 크기가 유지된다.

- renderError

웹뷰를 띄우다가 에러가 발생했을때 띄울 error fallback이다.

- onLoadEnd

웹뷰 리소스가 로딩이 완료 된 후 실행되는 콜백이다.

주로 로그 기록이나, 성능 측정, 추가적으로 스크립트 삽입을 해야하는 경우 사용한다.

RN 컨테이너 안에 기본적인 next.js 스킴을 넣어본 화면이다.