[React Native] RenderHTML Iframe Feat. WebView

React Native에서 HTML 콘텐츠 렌더링과 iframe 활용하기
React Native 프로젝트에서 HTML 콘텐츠를 렌더링하고, iframe을 통해 동영상을 표시해야 하는 경우가 종종 있다. 이런 상황에서 react-native-render-html과 @native-html/iframe-plugin을 활용하면 효율적으로 iframe 콘텐츠를 렌더링할 수 있다.

먼저, 필요한 패키지를 설치해보자.

npm install react-native-render-html react-native-webview @native-html/iframe-plugin

기본적인 예시 코드 iframe 콘텐츠를 렌더링하는 기본적인 코드 예시는 아래와 같다.

const ExampleIframeRender = () => {
  return (
    <SafeAreaView>
      <RenderHTML
        source={htmlContent}
        contentWidth={360} // 디바이스 너비에 맞게 조정
        renderers={{ iframe: IframeRenderer }}
        customHTMLElementModels={{ iframe: iframeModel }}
        renderersProps={{
          iframe: {
            webViewProps: {
              javaScriptEnabled: true,
              domStorageEnabled: true,
              allowsInlineMediaPlayback: true,
              style: { height: 315 }, // iframe 고정 높이
            },
          },
        }}
        WebView={WebView} // WebView 컴포넌트 전달
      />
    </SafeAreaView>
  );
};

export default ExampleIframeRender;

RenderHTML과 WebView 활용 이유

RenderHTML은 HTML 태그를 렌더링하기 위한 기본적인 렌더러를 제공하지만, iframe 태그는 기본적으로 지원되지 않는다. 그래서 IframeRenderer를 사용해 이를 처리해야 한다. @native-html/iframe-plugin에서 제공하는 IframeRenderer는 iframe 콘텐츠를 WebView로 렌더링하도록 설계되어 있다.

그리고 렌더링 동작을 더 세부적으로 제어하려면 renderersProps를 설정해야 한다. 이 부분에서 중요한 설정 몇 가지를 정리해보자:

javaScriptEnabled: iframe 콘텐츠 내 JavaScript를 활성화. YouTube와 같은 동적 콘텐츠는 JavaScript가 필요하다.
domStorageEnabled: DOM 스토리지를 활성화해서 동영상 플랫폼 같은 동적 콘텐츠가 원활하게 작동하도록 보장한다.
allowsInlineMediaPlayback: 동영상을 인라인으로 재생할 수 있게 해준다.
style: iframe 콘텐츠의 높이나 크기를 조정할 때 사용한다.
그리고 마지막으로, WebView 컴포넌트를 RenderHTML에 전달해서 iframe 콘텐츠를 렌더링할 수 있게 해준다.

RenderHTML 대신 WebView만 쓰면 안 될까?

WebView만으로도 HTML 전체를 렌더링 할 수 있지만 RenderHTML를 쓰는 이유는 다음과 같다.

유연한 태그 커스터마이징
RenderHTML은 다양한 HTML 태그(img, a, iframe 등)를 자동으로 렌더링하고, 각 태그를 커스터마이징할 수 있다. 필요하면 특정 태그에 대한 동작을 완전히 대체할 수도 있다.

React Native 친화적
RenderHTML은 React Native 환경에서 쉽게 사용할 수 있다. 디바이스 너비에 맞게 콘텐츠 크기를 자동으로 조정하거나, React Native 스타일을 적용하기가 훨씬 쉽다.

HTML 조작 가능
WebView는 HTML 전체를 로드하기 때문에, 특정 태그를 개별적으로 조작하거나 조건부로 렌더링하는 작업이 어렵다. 반면, RenderHTML은 HTML 콘텐츠를 React Native 컴포넌트로 변환해서 이런 작업이 훨씬 유연하다.

결론

RenderHTML은 HTML 콘텐츠를 더 효율적으로 다룰 수 있게 해준다. 특히 iframe 같은 동적 콘텐츠를 렌더링해야 할 때는 더더욱 그렇다. 자 이제 RenderHTML을 잘 활용해 보도록 하자