react-native로 하이브리드앱 만들기#2 - webView 설치 및 설정하기

react-native로 연결하기 위한 첫걸음은 webView를 도입하는 것입니다.

설치하기

npm i react-native-webview

설정하기

react-naitve 프로젝트 내 App.tsx에서 WebView 컴포넌트를 생성하고 source에 uri를 제공하면 앱에 웹 화면을 띄울 수 있습니다.

// App.tsx
import React, { Component } from 'react';
import { SafeAreaView } from "react-native";
import { WebView } from 'react-native-webview';

class MyWeb extends Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <WebView 
          source={{ uri: 'https://reactnative.dev/' }} 
        />
      </SafeAreaView>
    );
  }
}

localHost 연결하기

본격적으로 개발을 시작하기 전에 내 개발 주소를 webView에 연결해야 하는데
react-native는 localhost를 해석하지 못하기 때문에
http://localhost:3000 으로 연결할 경우 화면이 뜨지 않습니다.

ip 주소를 직접 입력하여 webView를 띄워야 합니다.
localhost ip 주소는 친절하게도 react 프로젝트를 터미널에서 npm start 할 경우 나옵니다.