React Native 코드 분석을 본격적으로 시작하면서
처음 마주한 WebView 에 대해서 조사하면서
배워간 내용들에 대해 정리해려 한다 . . 🐱🏍
우선 WebView 자체가 ReactNative 에서 제공하는 것이 아니라,
react-native-webview 패키지에서 제공된다 !
하나씩 차근차근 알아보자
WebView 란?
이미 존재하는 웹 페이지를 앱으로 옮겨 보여주는 것
WebView 설치하기
WebView 를 사용하기 위해서는 WebView 를 import 해주어야 한다.
기존에는 React Native core 에 있었지만,
React Natvie 가 core 에서 빼버렸기에 따로 설치를 해주어야 한다.
프로젝트 디렉토리 내에서 아래 두 명령어를 실행시켜주면 제대로 설치된다.
$ npm install --save react-native-webview
$ react-native link react-native-webview
WebView Import (사용) 하기
(1) uri 사용
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyWeb extends Component {
render() {
return <WebView source={{ uri: 'https://reactnative.dev/' }} />;
}
}
(2) inline HTML 사용
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyInlineWeb extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: '<h1>This is a static HTML source!</h1>' }}
/>
);
}
}
WebView에 의해 로드된 웹페이지로 메시지를 보내고,
해당 웹페이지로부터 메시지를 수신하고자 하는 작업을 수행해보자.
이를 위해서, 사용할 수 있는 방법이 3가지 있다!
1️⃣ [ReactNaitve -> Web 1] injectedJavaScript
웹 페이지를 처음 로드했을 때 바로 실행되는 스크립트이다.
페이지를 다시 로드하거나 이동하더라도 한 번만 실행된다.
import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
export default class App extends Component {
render() {
const runFirst = `
document.body.style.backgroundColor = 'red';
setTimeout(function() { window.alert('hi') }, 2000);
true; // note: this is required, or you'll sometimes get silent failures
`;
return (
<View style={{ flex: 1 }}>
<WebView
source={{
uri: 'https://github.com/react-native-webview/react-native-webview',
}}
onMessage={(event) => {}}
injectedJavaScript={runFirst}
/>
</View>
);
}
}
2️⃣ [ReactNaitve -> Web 2] injectJavaScript
또한, 반환 값 없이 WebView 에서 즉시 실행되는 JavaScript 코드를 삽입할 수 있다.
import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
export default class App extends Component {
render() {
const run = `
document.body.style.backgroundColor = 'blue';
true;
`;
setTimeout(() => {
this.webref.injectJavaScript(run);
}, 3000); // 3초 뒤 파란색 배경으로 변한다
return (
<View style={{ flex: 1 }}>
<WebView
ref={(r) => (this.webref = r)}
source={{
uri: 'https://github.com/react-native-webview/react-native-webview',
}}
/>
</View>
);
}
}
3️⃣ [Web -> ReactNative] postMessage/onMessage
실제적인 웹과 앱의 양방향 통신을 위한 API 이다.
ReactNative 쪽에서 onMessage 를 통해 WebView 의 postMessage 를 호출하면
데이터를 받는 형식이다.
onMessage 는 필수로 세팅해줘야 한다
그렇지 않으면 window.ReactNativeWebView.postMessage 메소드가 웹 페이지에 주입되지 않는다.
postMessage 는 string 인 하나의 인수만 사용할 수 있다.
import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
export default class App extends Component {
render() {
const html = `
<html>
<body>
<script>
setTimeout(function () {
window.ReactNativeWebView.postMessage("Hello!")
}, 2000)
</script>
</body>
</html>
`;
return (
<View style={{ flex: 1 }}>
<WebView
source={{ html }}
onMessage={(event) => {
alert(event.nativeEvent.data);
}}
/>
</View>
);
}
}
프로젝트를 진행하면서 주로 3번 방식으로 WebView 를 사용한다.
더 많은 내용은 공식 문서에 자세하게 쓰여져 있으니,
참고하시길 바라요 !
(여담으로 React Native 는 대부분 영어 문서 뿐인다 . .
영어 공부를 병행해보자 . . )
© 참고
https://github.com/react-native-webview/react-native-webview (WebView Github 공식 문서)
https://url.kr/uwm9pi (WebView 기본 설명 ★)
https://bangc.tistory.com/8 (React Native 와 WebView 데이터 통신 방식)
https://smok95.tistory.com/274 (WebView 데이터 전달받는 간단한 예제)
GitHub - react-native-webview/react-native-webview: React Native Cross-Platform WebView
React Native Cross-Platform WebView. Contribute to react-native-webview/react-native-webview development by creating an account on GitHub.
github.com
'Project > softsphere' 카테고리의 다른 글
| [React] Hooks (a.k.a useEffect + useState) (0) | 2021.10.15 |
|---|---|
| [React Native] React Native Paper (0) | 2021.10.08 |
| [!React Native] Chocolatey 설치 (feat. sudo / locate32 사용법) (0) | 2021.10.01 |
| [!React Native] net::ERR_CONNECTION_REFUSED 오류 파헤치기 (0) | 2021.09.30 |
| [React Native] Github 협업 프로젝트 clone 받아 사용하기 (with 안드로이드 실기기) (0) | 2021.09.29 |