[React Native] WebView 적용하는 방법(localhost 안될때,nsurlerrordomain)

WebView를 어떻게 App에서 적용할 수 있는 건지 항상 궁금했었는데, 이번 프로젝트를 통해서 알게됐다.

WebView란 웹 프로젝트 그 자체를 그냥 앱에서 띄우는 것이다. Naver도 WebView로 만들어진 앱으로 유명한데, 웹뷰는 즉, naver.com을 치면 나오는 화면을 그대로 앱에서 보여주는 것이다.

 

React Native에서 적용하는 방법은 엄청 간단하다!

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

export default function Home() {
  return (
    <WebView
      source={{
        uri: 'https://naver.com',
      }}
      style={{flex: 1}}
    />
  );
}

이렇게 해주면? 나도 네이버앱 완성이다!ㅋㅋㅋㅋ

 

다만 WebView를 보여줄 때, 고려해야할 점은 바로 Stack이다. App에서 Screen Stack이 쌓이는게 아니다 보니 뒤로가기하면 앱이 종료가 된다. 이 부분은 웹뷰가 바뀔 때마다 그것을 state로 관리를 해주고, 그 state가 변경될 시 뒤로가기 버튼은 HardwareBackButton Event 등을 사용해서 제어해주어야한다.

 

그런데 나는 web을 next.js로 개발하면서 바로 핸드폰으로 확인하고 싶었다. 아까 웹뷰의 코드에서 source uri를 http://127.0.0.1:3000으로 변경하자 에러가 발생했다. 

 

일단, iOS에서는 Http통신을 허용하기 위해 아래의 값을 true로 변경해주어야한다.

<key>NSAppTransportSecurity</key>
<dict>
	<!-- Do not change NSAllowsArbitraryLoads to true, or you will risk app rejection! -->
	<key>NSAllowsArbitraryLoads</key>
	<true/> <!-- 이걸 true로 변경할 것 -->
	<key>NSAllowsLocalNetworking</key>
	<true/>
</dict>

 

다만 위에 주석으로 경고가 나와있듯이 개발환경에서만 True로 설정하고, 추후에 배포시에는 false로 변경해주어야한다.

 

설정이 완료되었다면 화면이 나와야할 것 같지만 또 나오지 않고 아래의 에러가 나타날 것이다.

Error loading page
Domain: undefined
Error: Code: -6
Description: net::ERR_CONNECTION_REFUSED

이 에러의 해결방법도 간단하다.

 

Localhost:3000으로 접속하고 싶다면 아래의 코드를 터미널에 입력해주면 된다.

adb reverse tcp:3000 tcp:3000
//포트는 원하는대로 바꾸면 된다.

그리고 종료한 후, 다시 실행하면 로컬서버가 제대로 나온다! 로컬서버가 변경될때마다 Hot-load도 아주 잘되는걸 알 수 있다.

 

추가:

왜인지 새로 시작한 프로젝트에서는 localhost로 접속시 nsurlerrordomain 에러가 발생했다.

해결 방법은 와이파이 IP주소를 확인 후 사용하면 된다.

 <WebView
   source={{
  	 uri: 'http://192.0.0.0:3000',
   }}
/>

와이파이 IP주소로 접근을 하면 웹 개발 환경으로 접속이 가능할 것이다!