[리액트 네이티브(React-Native RN)] Expo에서 localhost webview 사용하는 방법

리액트 네이티브(React-Native RN)에서 localhost webview를 구성해야될 때가 있습니다. 웹뷰를 좀 더 편하게 디버깅하기 위해서도 있고, 좀 더 효율적으로 개발환경을 구성하기 위해서도 꼭 필요한 작업입니다. 하지만 단순하게 웹서버에서 열어준 localhost:{PORT}로 webview uri를 구성하면 아래와 같은 에러를 맞이하게 됩니다.

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

정말 간단하게 리액트 네이티브 웹뷰에서 우리가 구성하려는 웹뷰 로컬환경을 설정하는 방법은 웹뷰 개발 환경을 실행하기 전에 HOST=0.0.0.0을 설정하는 것입니다.

// package.json
{
  "scripts": {
    "dev": "HOST=0.0.0.0 nuxt", // dev 스크립트에 HOST=0.0.0.0 추가
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "deploy": "yarn build && gcloud app deploy"
  },
}

기존에 localhost로 열리던 Nuxt서버는 현재 ip로 구성되어 서버가 열립니다.

테스트폰의 네트워크 환경도 웹 서버 구동 네트워크랑 동일하게 맞춰줍니다. 예를 들어 웹 서버가 A 와이파이를 사용한다면 Expo를 구동하고 있는 테스트폰 네트워크도 A 와이파이로 구성해야됩니다.

RN의 웹뷰 uri를 변경합니다.

export default class Location extends Component {
  render() {
    return (
      <WebView source={{ uri: "http://192.168.81.13:3000" }} />
    );
  }
}

정상적으로 웹뷰 개발환경을 사용할 수 있는 예시