Introducing new iOS WebViews

오랜 시간 동안 애플은 UIWebView 대신 WKWebView 사용을 권장해왔다. 앞으로 몇 달 안에 출시될 iOS 12에서는 UIWebView가 공식적으로 지원 중단될 예정이다. 리액트 네이티브의 iOS WebView 구현은 UIWebView 클래스에 크게 의존하고 있다. 이러한 변화를 고려하여, 리액트 네이티브의 WebView 컴포넌트를 WKWebView 기반으로 재구성한 새로운 네이티브 iOS 백엔드를 개발했다.

이 변경 사항의 마지막 부분은 이 커밋에 반영되었으며, 0.57 릴리스에서 사용할 수 있다.

이 새로운 구현을 사용하려면 useWebKit prop을 사용한다:

<WebView
  useWebKit={true}
  source={{url: 'https://www.google.com'}}
/>

개선 사항

UIWebView는 웹뷰에서 실행되는 자바스크립트와 React Native 간의 통신을 정상적으로 지원하지 않았다. 웹뷰에서 메시지를 보낼 때, 우리는 이를 React Native로 전달하기 위해 해킹적인 방법에 의존해야 했다. 간단히 말해, 메시지 데이터를 특수한 스키마가 포함된 URL로 인코딩한 후, 웹뷰를 해당 URL로 이동시켰다. 네이티브 측에서는 이 네비게이션을 가로채고 취소한 후, URL에서 데이터를 파싱하여 최종적으로 React Native를 호출했다. 이 구현 방식은 오류가 발생하기 쉽고 보안상 취약점이 있었다. 이제 우리는 WKWebView의 기능을 활용해 이를 완전히 대체했으며, 이 소식을 기쁘게 전한다.

WKWebView가 UIWebView에 비해 갖는 다른 장점으로는 더 빠른 자바스크립트 실행 속도와 멀티 프로세스 아키텍처가 있다. 자세한 내용은 2014 WWDC를 참고한다.

주의 사항

컴포넌트에서 아래와 같은 props를 사용한다면, WKWebView로 전환할 때 문제가 발생할 수 있다. 당분간은 이 props들을 사용하지 않는 것을 권장한다.

일관되지 않은 동작:

automaticallyAdjustContentInsets와 contentInsets (커밋)

WKWebView에 contentInsets를 추가해도 WKWebView의 뷰포트는 변경되지 않는다. 뷰포트는 프레임과 동일한 크기를 유지한다. 반면 UIWebView에서는 뷰포트 크기가 실제로 변경된다(만약 contentInsets가 양수라면 더 작아진다).

backgroundColor (커밋)

새로운 iOS WebView 구현체를 사용하면, 이 속성을 사용할 때 배경색이 깜빡이며 나타날 가능성이 있다. 또한 WKWebView는 투명한 배경을 UIWebview와 다르게 렌더링한다. 자세한 내용은 커밋 설명을 참고한다.

지원되지 않는 기능:

scalesPageToFit (커밋)

WKWebView는 scalesPageToFit prop을 지원하지 않기 때문에, React Native의 WebView 컴포넌트에서 이 기능을 구현할 수 없었다.