React Native에서 WebView사용하기

 

1. React Native에서 WebView 사용하기

React Native에서는 react-native-webview 라이브러리를 사용해 웹 콘텐츠를 쉽게 렌더링할 수 있다.

👉 이렇게 하면 앱에서 웹 게시판을 바로 표시할 수 있고, 앱의 무거운 업데이트 없이 꾸준히 콘텐츠를 업데이트할 수 있어서 효율적이다.

npm install react-native-webview

 

import React from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';

export default function NoticeBoard() {
  return (
    
      https://your-website.com/notice-board' }} 
        style={{ flex: 1 }}
      />
    
  );
}

 

 

2. 웹 콘텐츠 업데이트 관리

: 웹뷰에서 표시할 HTML/CSS/JS를 업데이트해야 하는데, 보통 다음과 같은 3가지 방법이 있다.
✔️  정적 웹사이트: GitHub Pages, Netlify, Vercel 같은 배포 플랫폼에서 정적 사이트 호스팅.
✔️  Headless CMS: 콘텐츠만 업데이트하고 싶다면 Strapi나 Contentful 같은 CMS를 사용해 데이터를 관리.
✔️ Firebase Hosting: React나 Vue로 만든 간단한 SPA를 Firebase Hosting에 올려서 웹뷰에 연결.

 

 

 

 

3. 웹뷰와 네이티브의 데이터 연동
: React Native와 웹 콘텐츠 사이에서 데이터를 주고받으려면 postMessage와 onMessage를 활용한다.

 

1)  웹에서 React Native로 데이터 전송:

<script>
  window.ReactNativeWebView.postMessage(JSON.stringify({ event: "update", data: "New Notice!" }));
</script>

2)  React Native에서 메시지 수신:

https://your-website.com/notice-board' }}
  onMessage={(event) => {
    const data = JSON.parse(event.nativeEvent.data);
    console.log('Received data from WebView:', data);
  }}
/>

 

 

 

 

 

4. 장점과 주의점

✨ 장점:

• 앱 업데이트 없이 콘텐츠 업데이트 가능.
• 유지보수가 쉽고 빠름.

⚠️ 주의점:

• 웹뷰는 네이티브 성능보다 느릴 수 있음 (최적화 필요).
• 오프라인 환경에서는 웹 콘텐츠 로드 불가 (캐싱 전략 필요).

 

 

5. 결론: React Native 앱에서 꾸준히 업데이트되는 게시판을 웹뷰로 처리하는 건 효율적인 선택이다.

• 정적 웹사이트 또는 CMS를 사용해 게시판을 관리.
• React Native에서 웹뷰로 임베드하고, postMessage와 onMessage로 데이터 연동.
• 캐싱과 성능 최적화만 챙기면, 깔끔하고 유지보수하기 좋은 구조가 만들어질 것이다.

 

 

 

 

 

 

 

 

---

 

React Native와 WebView를 혼합하여 사용하는 기업들의 실제 사례

1. 토스(Toss)

토스는 모바일 서비스 개발에서 React Native와 WebView를 함께 활용하고 있습니다. 사용자 경험이 중요한 부분은 네이티브로 개발하고, 매일 실험을 통해 제품을 개선하는 부분은 React Native나 WebView를 사용합니다. 이를 통해 사용자 경험을 향상시키고 개발 생산성을 높이고 있습니다. 

https://docs.tosspayments.com/resources/glossary/webview

웹뷰(WebView) | 토스페이먼츠 개발자센터

 

https://toss.tech/article/26311

토스가 꿈꾸는 React Native 기술의 미래

 

2. 당근마켓

파일 기반 웹뷰: HTML/CSS/JS 파일을 앱 내부에 저장하고 이를 웹뷰에서 로드해 네이티브-웹 하이브리드 환경을 구현.

 

https://medium.com/daangn/%EB%8B%B9%EA%B7%BC%EB%A7%88%EC%BC%93%EC%97%90-%EC%9B%B9-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-1-%ED%8C%8C%EC%9D%BC-%EA%B8%B0%EB%B0%98-%EC%9B%B9%EB%B7%B0-d312b17e697c

 

 

 

 

 

 

 

 

 

 

 

 

 

---

참고 레퍼런스

 

1. React Native WebView 공식 문서 : react-native-webview

2. 웹 콘텐츠 배포 플랫폼

• Netlify: https://www.netlify.com/
• Vercel: https://vercel.com/
• Firebase Hosting: https://firebase.google.com/docs/hosting

3. React Native & WebView 통신 튜토리얼 : React Native WebView: Communication between Native and We

4. 캐싱 & 퍼포먼스 최적화 : WebView caching strategies in React Native